Html 使用 CSS 限制每行的字符数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2757483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Limiting the number of characters per line with CSS
提问by Pieter
I have a paragraph of text:
我有一段文字：
<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>
How can I make sure that no more than 30 characters are shown on one line with CSS?
如何确保使用 CSS 在一行中显示不超过 30 个字符？
采纳答案by Sarfraz
That's not possible with CSS, you will have to use the Javascript for that. Although you can set the width of the pto as much as 30 characters and next letters will automatically come down but again this won't be that accurate and will vary if the characters are in capital.
这在 CSS 中是不可能的，您必须为此使用 Javascript。虽然您可以将 的宽度设置p为多达 30 个字符，并且下一个字母会自动降低，但这不会那么准确，并且如果字符为大写，则会有所不同。
回答by Alex
You could do this:
(Note! This is CSS3 and the browser support = good!! )
你可以这样做：
（注意！这是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 */
}
回答by Nasia Makrygianni
The latest way to go is to use the unit 'ch' which stands for character.
最新的方法是使用代表字符的单位“ch”。
You can simply write:
你可以简单地写：
p {
max-width: 75ch;
}
p {
max-width: 75ch;
}
The only trick is that whitespaces won't be counted as characters..
唯一的技巧是空格不会被算作字符。
Check also this post: https://stackoverflow.com/a/26975271/4069992
回答by Pino
If you use CSS to select a monospace font, the problem of varying character length is easily solved.
如果使用 CSS 选择等宽字体，字符长度变化的问题就很容易解决了。
回答by Dan Andreasson
Depending on what font you're using you can set max-widthon the paragraph with a calculated value. It will not be exact, but I've found that in most cases that does not matter.
根据您使用的字体，您可以使用max-width计算值在段落上设置。它不会是准确的，但我发现在大多数情况下这并不重要。
p {
max-width: calc(30em * 0.5);
}
The number you multiply with depends on what font it is, and how much a character takes up in a em square. More characters = less accurate.
你乘以的数字取决于它是什么字体，以及一个字符在一个 em 方块中所占的数量。更多字符 = 不太准确。
回答by user3280419
A better solution would be you use in style css, the command to break lines. Works in older versions of browsers.
更好的解决方案是您在样式 css 中使用断行命令。适用于旧版本的浏览器。
p {
word-wrap: break-word;
}
回答by Felipe Bernardes
Another approach to this would put a spanelement with a display:blockstyle inside the pelement each time you need the content to break. It would only be useful when your pcontent is static.
这另一种方法是把一个跨度元素与块：显示风格里面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>
It would output:
它会输出：
This is a not-dynamic text and I want to put
the following words in the next line
and these others in a third one
这是一个非动态文本，我想放
下一行中的以下单词
和这些其他人在第三个
This allows you to change your text line-breaks in different viewports without JS.
这允许您在没有 JS 的情况下在不同的视口中更改文本换行符。
