Question

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

例如：

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

＆＃34;数据：＆＃34;不得出示。

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

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

Answer 1

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

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

最好的结果是如果你有一个等宽字体并且你在支持ch单位的浏览器中查找，那么text-indent: -4ch将意味着你隐藏4个字符。

Answer 2

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

负边距，缩进等是不可靠的，因为我们不知道字体是如何渲染的，这意味着它可能在不同的浏览器中，在不同的缩放级别等下都会破坏和看起来很丑......

底线：单靠CSS无法做到

Answer 3

就像其他人所说的那样，它不可能完全符合你的要求。但只是为了好玩，如果它总是＆＃34;数据：＆＃34;你试图隐藏的，你可以这样做：

＆＃13;

h4 {
    position: relative;
    background-color: white;
}

h4:before {
    content: "Data: ";
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    color: white;
}

＆＃13;

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

＆＃13;

但我同意其他人的观点，在PHP中拦截可能是最好的方法。

Answer 4

好的，所以没有纯CSS解决方案。但我找到了一种非常简单的方法来通过jQuery选择第一个单词并将其包装在<span>中。

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

jsfiddle link

隐藏前x个字符

4 个答案: