Cause line to wrap to new line after 100 characters
The closest you can get is to set a maximum width in ch
units. 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 ch
is not universally supported, some backup is advisable, using the em
unit. As a very rough rule of thumb, for typical English text, the average width of characters is 0.4em
or a little more. (This depends on many things, including the nature of the text and the font.)
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 techniques like 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.
You can get an exact correspondence between the ch
unit and the average width of characters only by using a monospace font. That’s normally not suitable for normal text, only for computer code.
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.
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.