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

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

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

您乘以的数字取决于它是什么字体，以及字符占用的广场数量。更多字符=不太准确。

Answer 5

最新的方法是使用单位'ch'代表角色。

您可以简单地写一下：

p { max-width: 75ch; }

唯一的技巧是空格不会被计为字符..

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

Answer 6

更好的解决方案是使用样式css，断行的命令。适用于旧版本的浏览器。

p {
word-wrap: break-word;
}

Answer 7

我在上面看到了很多答案及其工作。 ??

此外，这也适用于我。

p {
    overflow-wrap: break-word;
  }

Answer 8

另一种方法是在 span 元素，并带有 display：block 样式每当您需要打破内容时， p 元素。仅当您的 p 内容是静态内容时才有用。

<p>this is a not-dynamic text and I want to put<span style="display:block">the following words in the next line</span>and these other words in a third one</p>

它会输出：

这是一个非动态文本，我想放

下一行中的以下字词

和其他人在第三个

这允许您在不使用JS的情况下更改不同视口中的文本换行符。

使用CSS限制每行的字符数

8 个答案: