因为要在100个字符后换行换行 [英] Cause line to wrap to new line after 100 characters

问题描述

在CSS中有一种方法，我可以导致这个列表中的第三个元素，比其余的更长，换行到一个新行，如果它扩展超过100个字符？所以其余的文本是在下一行？

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?

我试着给予< li> a 。

我也试过了 overflow：hidden; ，然后把它关掉，但是内容溢出。

I also tried overflow:hidden; and that cuts it off, but the rest is hidden and not on a new line.

我如何做到这一点？

JS Fiddle其中我想这样做： http://jsfiddle.net/ZC3zK/

Here is a JS Fiddle where I am trying to do this: http://jsfiddle.net/ZC3zK/

推荐答案

你的线不是自然的，因为你不要有任何空格。您可以使用 word-wrap 强制中断，然后添加一个最大宽度来表示它可以有多宽。

Your line isn't breaking naturally because you don;t have any spaces in it. You can use word-wrap to force the breaks, then add a max-width to say how wide it can be.

CSS

li{
    max-width:200px;
    word-wrap:break-word;
}

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/

您需要JavaScript才能完全计算100个字符，并在那里划线。检查此处和此处 a>用于JavaScript示例。

You'd need JavaScript to count exactly 100 characters and break the line there. Check here and here for JavaScript examples.

这篇关于因为要在100个字符后换行换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！