使用 CSS 限制每行的字符数答案

【问题标题】：Limiting the number of characters per line with CSS使用 CSS 限制每行的字符数
【发布时间】：2011-02-14 23:52:51
【问题描述】：

我有一段文字：

<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 个？

【问题讨论】：

如果你说你为什么需要这样做，我可能会提供帮助。
这是一个奇怪的课堂作业的一部分。不是我的主意。摘自《万维网编程 2009》一书：“文档必须有一段至少 20 行描述您的文本。该段必须位于页面中心，并且每行只能有 30 个字符的空间。（... )"
哦，您最多需要 30 个字符，而不是每行 30 个字符。我猜这本书的目标是width: 30em，尽管这并不完全正确。我的猜测是这是一个写得不好的问题（甚至是一本写得不好的书）。

标签： html css

【解决方案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 */
    }

【讨论】：

提示：使用max-width: XXXpx; 是动态表的更好选择。
目前还不清楚的是，这似乎不适用于所有 HTML 元素。起初，我有一个锚元素，但它无法按设计工作。
我也喜欢max-width。与em 一起，它也可以扩展。这种方法将取决于开发人员制作的字体有多大；不过可以制作合理的传真：p { max-width:40em; }.

【解决方案2】：

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

你可以简单地写：

p { max-width: 75ch; }

唯一的技巧是空格不会被算作字符..

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

【讨论】：

请注意，ch 表示给定字体中 0 字符的宽度。在等宽字体中，所有字符将具有相同的宽度，因此添加 max-width: 75ch 将有效地将每行的字符数限制为 75。但在非等宽字体中，字母数可能因行而异（因为 i 是例如，比 m 窄）。

【解决方案3】：

您可以将p 的宽度设置为最多 30 个字符，并且下一个字母会自动下降，但同样不会那么准确，并且如果字符大写，则会有所不同。看看这个例子：

p {
  max-width: 30ch;
}

【讨论】：

那么我将如何在 JS 中执行此操作？它是复杂的还是只是一条线？
@Pieter：我想你可以使用 javascript 的 substr 函数，它不会是一个单一的衬里（除非正则表达式可以解决问题），但我建议你只设置如果要求不那么严格，则为段落的宽度。
+1 这就是我解决这个问题的方法——只是烦人，大多数字体都是可变宽度的，所以如果某个很棒的人放入 MMMMMMMM ......他们通常会破坏你的设计或溢出。如果你将
的宽度设为 30 毫秒，那么 div 的末尾通常会有很多空间。你需要做出判断。
这个答案不正确。正确的答案是将 max-width 属性设置为一定数量的“ex”单位。例如， max-width: 30ex 应该满足问题的要求。
@Christopher 问题是限制字符数，而不是段落的宽度。字符有不同的宽度。您可能会争辩说设置 max-width 会是一个更好的主意，但这不是手头的问题。

【解决方案4】：

如果使用 CSS 选择等宽字体，字符长度变化的问题很容易解决。

【讨论】：

但是会影响你的视觉设计。
开发人员与设计师！战斗！
我知道这是一个旧答案，但是……它是如何“轻松解决”的？ :)
@mhulse 等宽字体在每个字符的像素中具有相同的宽度，因此通过简单的数学运算即可知道根据文本长度必须使用的宽度。
这不是很好

【解决方案5】：

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

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

乘以的数字取决于它是什么字体，以及一个字符在 em 方格中所占的比例。更多字符 = 不太准确。

【讨论】：

这可能是公认的答案。仅使用 CSS 的简单解决方案。

【解决方案6】：

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

p {
word-wrap: break-word;
}

【讨论】：

【解决方案7】：

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

此外，这也适用于我。

p {
    overflow-wrap: break-word;
  }

【讨论】：

【解决方案8】：

另一种方法是在 display:block 中放置一个具有 display:block 样式的 span 元素>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 的情况下更改不同视口中的文本换行符。

【讨论】：