Html 隐藏前x个字符

是否可以通过css隐藏h4元素的第一个x字符

例如：

<h4>Data: This is some random data.</h4>

数据：这是一些随机数据。

“数据：”不应显示

我尝试了溢出和移动包含h4的div，这是有效的，但对我来说不是一个好的解决方案

---

也许有一个命令我不知道哪一个有用。我知道JavaScript和strreplace也可以，但我正在寻找一个纯CSS解决方案。

遗憾的是，CSS无法计算字符串的宽度，也无法访问文本内容。。。如果您使用的是单空间字体，您可以根据字体大小手动计算宽度，但这仍然是一个糟糕的解决方案

负边距、缩进等是不可靠的，因为我们不知道字体是如何呈现的，这意味着在不同的浏览器中，在不同的缩放级别下，这些字体都可能会断裂，看起来很难看

---

一句话：单靠CSS无法做到这一点

尝试使用文本缩进和负值，并隐藏溢出：

h4{
overflow-x: hidden;
text-indent: -10px;
}

---

最好的结果是，如果您使用单空格字体，并且在支持

ch

单位的浏览器中查找，那么

文本缩进：-4ch

实际上意味着您隐藏了4个字符。

就像其他人所说的，不可能准确地显示您想要的内容。但只是为了好玩，如果你想隐藏的总是“数据”，你可以这样做：

h4{
位置：相对位置；
背景色：白色；
}
h4:之前{
内容：“数据：”；
位置：绝对位置；
排名：0；
左：0；
背景色：白色；
颜色：白色；
}

---

数据：这是一些随机数据

好的，所以没有一个纯CSS解决方案。但是我发现了一种非常简单的方法，通过jQuery选择第一个单词并将其包装在

中

jQuery（“.first word”）。每个（函数（）{
var me=$（this），fw=me.text（）.split（“”）；
html（“”+fw.shift（）+“”+fw.join（“”））；
});

---

用元素包装

数据：

，并隐藏它！我认为如果没有围绕“数据”的span之类的东西，这是不可能的。使用CSS动态执行此操作的唯一方法是设置

max width

并使用

text overflow

。不幸的是，这是不可能的，因为每个h4都是通过XML文件动态创建的。我必须按原样使用h4:/如何将XML加载到标记中？这就是我截取文本并修改它的地方。好主意，可惜它在有背景的情况下无法工作+1删除隐藏溢出-x（至少在Chrome上）所创建的额外5px边距底部可能值得一试

jQuery(".first-word").each(function(){
    var me = $(this), fw = me.text().split(' ');
    me.html( '<span>' + fw.shift() + '</span> ' + fw.join(' ') );
});