CSS 导致行在 100 个字符后换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16754608/
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
Cause line to wrap to new line after 100 characters
提问by Irfan Mir
Is there a way in CSS that I can cause the 3rd element in this list, which is longer than the rest, to wrap to a new line if it extends over 100 characters? so that the rest of the text is on the next line?
在 CSS 中，是否有一种方法可以使此列表中的第 3 个元素（比其余元素长）在扩展超过 100 个字符时换行到新行？以便文本的其余部分在下一行？
I tried giving that <li>a less width, but the content overflows.
我试着给它<li>一个较小的宽度，但内容溢出。
I also tried overflow:hidden;and that cuts it off, but the rest is hidden and not on a new line.
我也试过overflow:hidden;，它切断了它，但其余的都是隐藏的，而不是在一个新的线上。
How can I do this?
我怎样才能做到这一点？
Here is a JS Fiddle where I am trying to do this: http://jsfiddle.net/ZC3zK/
这是我尝试执行此操作的 JS Fiddle：http: //jsfiddle.net/ZC3zK/
回答by DACrosby
Your line isn't breaking naturally because you don;t have any spaces in it. You can use word-wrapto force the breaks, then add a max-width to say how wide it can be.
您的线路不会自然中断，因为您没有；其中没有任何空格。您可以使用word-wrap强制中断，然后添加一个 max-width 来说明它的宽度。
CSS
CSS
li{
max-width:200px;
word-wrap:break-word;
}
HTML
HTML
<ul>
<li>Hello</li>
<li>How are you</li>
<li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslat eMobileBooksOffersWalletShoppingBloggerFin ancePhotosVideosEven more ?Account OptionsSign inSearch...</li>
<li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEvenmore?AccountOptionsSigninSearch...</li>
</ul>
http://jsfiddle.net/daCrosby/ZC3zK/1/
http://jsfiddle.net/daCrosby/ZC3zK/1/
You'd need JavaScript to count exactly 100 characters and break the line there. Check hereand herefor JavaScript examples.
回答by Jukka K. Korpela
The closest you can get is to set a maximum width in chunits. This unit is defined to be the width of the digit zero “0”, but it's the closest approximation to “average width of characters” that we have in CSS. This means that some lines may be a little longer than 100 characters. Since chis not universally supported, some backup is advisable, using the emunit. As a very rough rule of thumb, for typical English text, the average width of characters is 0.4emor a little more. (This depends on many things, including the nature of the text and the font.)
你能得到的最接近的是以ch单位设置最大宽度。这个单位被定义为数字零“0”的宽度，但它最接近我们在 CSS 中的“平均字符宽度”。这意味着某些行可能会略长于 100 个字符。由于ch并非普遍支持，建议使用该em设备进行一些备份。作为一个非常粗略的经验法则，对于典型的英文文本，字符的平均宽度是0.4em或多一点。（这取决于很多事情，包括文本的性质和字体。）
li { max-width: 40em; max-width: 100ch; }
This will cause normal wrapping, which means (for English text) breaking at spaces when needed, and possibly after some characters like the hyphen. If you want abnormal wrapping, too, you need to define exactly how and implement it using various techniqueslike hyphenation or zero-width spaces. Avoid the setting word-wrap: break-word, often offered as snake oil – it liter ally brea ks word s, and it is suitable for very special occasions only.
这将导致正常换行，这意味着（对于英文文本）在需要时在空格处中断，并且可能在一些字符（如连字符）之后中断。如果您也想要异常换行，您需要准确定义如何使用连字符或零宽度空格等各种技术来实现它。避免设置word-wrap: break-word，通常以蛇油的形式提供——它实际上是一个词，它只适用于非常特殊的场合。
You can get an exact correspondence between the chunit and the average width of characters only by using a monospace font. That's normally not suitable for normal text, only for computer code.
ch只有使用等宽字体，您才能获得单位和字符平均宽度之间的精确对应关系。这通常不适用于普通文本，仅适用于计算机代码。
Note that 100 characters is much larger than line lengths commonly recommended by typographers. The optimal length is around 60 or even less (again, depending on nature of text and font, as well as line spacing), and 90 should be regarded as the maximal.
请注意，100 个字符远大于印刷师通常推荐的行长。最佳长度在 60 左右甚至更少（同样，取决于文本和字体的性质以及行距），90 应该被视为最大值。
回答by Amit Kumar
Please try this code. I have successfully implemented word-wrapping using Javascript.
请试试这个代码。我已经成功地使用 Javascript 实现了自动换行。
var a = $('.targetDiv').text().match(/.{1,50}/g);
var b = '';
if (a != null) {
for (var i = 0; i< a.length; i++) {
if (a[i].toString() != null) {
b = b + '<p>' + a[i].toString() + '</p>';
}
}
$('.targetDiv').html(b);
}
回答by Amit Kumar
I have one more solution for wrapping String.
我还有另一种包装字符串的解决方案。
My code will wrap String without breaking word.
我的代码将包装字符串而不破坏单词。
outputString=''+$('cssSelector').text()+''
outputString=''+$('cssSelector').text()+''
回答by Max Carayol
That worked pretty well for me :
这对我来说效果很好：
Using a tag where you want the line to wrap, and then prevent white spaces from wrapping.
在要换行的位置使用标记，然后防止空格换行。
.h2_wrap
{
white-space: nowrap;
font-size: 18px;
}<h2 class="h2_wrap">Pretty long sentence that looks<wbr> better when cut at one specific spot</h2>回答by Lance Hudson
You can give the container a width and use the CSS3 word-wrap property. Not exactly 100 characters though.
您可以为容器指定宽度并使用 CSS3 自动换行属性。虽然不完全是 100 个字符。
<ul style="width: 100px; word-wrap:break-word;">
<li>Hello</li>
<li>How are you</li>
<li>SearchImagesMapsPlayYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEven more ?Account OptionsSign inSearch...</li>
<ul>
