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

Answer 1

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>

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

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 4

You can give the container a width and use the CSS3 word-wrap property. Not exactly 100 characters though.

<ul style="width: 100px; word-wrap:break-word;">
  <li>Hello</li>
  <li>How are you</li>
  <li>SearchImagesMapsPlayYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEven more »Account OptionsSign inSearch...</li>
<ul>

Answer 5

If you are working with excel you can use this:

A1 is the cell text

=IF(LEN(A1)<100;A1;MID(A1;1;100))

Text end after 100 characters

=IF(LEN(A1)<100;A1;MID(A1;100;LEN(A1)-1))

text starts and ends after 100 to end.

Answer 6

I have one more solution for wrapping String.

My code will wrap String without breaking word.

outputString=''+$('cssSelector').text()+''