css - Cause line to wrap to new line after 100 characters

Question

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?

I tried giving that <li> a less width, but the content overflows.

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

How can I do this?

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

Answer 1

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/

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