使用CSS限制每行的字符数

Question

我有一段文字:

<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

如何确保CSS在一行中显示的字符数不超过30个？

Answer 1

你可以这样做:
(注意这是CSS3和浏览器支持=好!!)

   p {
    text-overflow: ellipsis; /* will make [...] at the end */
    width: 370px; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
    }

Answer 2

使用CSS是不可能的,你必须使用Javascript.虽然你可以设置p多达30个字符的宽度,然后下一个字母会自动降下来,但这又不会那么准确,如果字符是大写字母则会有所不同.

Answer 3

如果使用CSS选择等宽字体,则可以轻松解决字符长度变化的问题.

Answer 4

最新的方法是使用代表字符的单位“ ch”。

您可以简单地写：

p { max-width: 75ch; }

唯一的窍门是空格将不被视为字符。

另请检查此帖子：https : //stackoverflow.com/a/26975271/4069992

Answer 5

根据您使用的字体，可以max-width在段落中设置一个计算值。这不是确切的，但是我发现在大多数情况下这并不重要。

p {
  max-width: calc(30em * 0.5);
}

您乘以的数字取决于它是什么字体，以及一个字符在em正方形中占据了多少。更多字符=不太准确。