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.

Answer 2

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.

Answer 3

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>