如何使用 CSS 仅显示字符串的前 10 个字符？

Posted 2023-03-06

【中文标题】如何使用 CSS 仅显示字符串的前 10 个字符？

【英文标题】：How do I display only the first 10 characters from a string using CSS?

【发布时间】：2011-07-08 02:37:34

【问题描述】：

我有一个 30 个字符的字符串

我只想显示前 10 个，后跟 ...

例如

---

这是 30 个字符长的字符串

会变成

thisisastr...

---

这可以使用 CSS 实现吗？

干杯！

【参考方案1】：

#containerx 
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 60%;

通过调整宽度可以控制要显示的字符数

【参考方案2】：

有一个CSS3 based solution text-overflow:ellipsis; 声称是跨浏览器。但它也会显示尽可能多的字符，而不是 10 个。

【讨论】：

它似乎将在 Firefox 4 中停止工作：***.com/questions/4927257/…

【参考方案3】：

它被称为ellipsis，您可以在块元素上使用它。

但是它在 Firefox 中不起作用，并且您不能将宽度设置为正好 10 个字符，因为您无法在 css 中指定字符宽度。

如果您想要恰好 10 个字符并与 Firefox 兼容，则必须使用 javascript 或服务器端解决方案。

【讨论】：

太棒了——我非常需要这种功能——我从来没有问过它是否存在，因为我认为它不会存在。很高兴知道。

为此欢呼，我只是在前十个字符上使用 preg_match，然后添加...再次感谢