Irfan Mir Irfan Mir - 5 months ago 34
CSS Question

Cause line to wrap to new line after 100 characters

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

a less width, but the content overflows.

I also tried
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:


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.




    <li>How are you</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslat eMobileBooksOffersWalletShoppingBloggerFin ancePhotosVideosEven more ┬╗Account OptionsSign inSearch...</li>
    <li>SearchImagesMapsPla yYouTubeNewsGmailDriveMoreCalendarTranslateMobileBooksOffersWalletShoppingBloggerFinancePhotosVideosEvenmore┬╗AccountOptionsSigninSearch...</li>

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