因为在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;
如何做到这一点?
这里是一个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> for JavaScript examples。
You'd need JavaScript to count exactly 100 characters and break the line there. Check here and here for JavaScript examples.
这篇关于因为在100个字符后换行换行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!