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

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.