Use CSS to process long strings

Line feed display of long strings

For Chinese characters, long strings are not a problem. The browser can use a correct line feed, but for English characters, it may break through the width of the container and affect the appearance. The solution is not difficult, but the compatibility between IE and Firefox must be considered:

<Div style = "width: 100px; Height: 100px; Border: 1px solid #000000; Word-wrap: Break-word; overflow: hidden;">
Abcdefghijklmnopqrstuvwxyz
</Div>

IE will set the correct line feed according to the word-wrap settings. Although Firefox does not recognize word-wrap, it will make a proper deal according to the overflow settings.

Pay attention to using IE as much as possibleWord-wrapInsteadWord-breakThis is because word-break does not process consecutive punctuation marks.

Long String omitted display

Sometimes, when processing long strings, you must keep a single line. In this case, you can only hide the excess parts and add the ellipsis at the end:

<Div style = "width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
One world. One dream.
</Div>

In IE, everything works normally, but in Firefox, the text-overflow attribute is not supported, and only redundant parts of the string can be simply hidden.

Firefox does not support word-wrap: Break-word or text-overflow: ellipsis. For simple solutions, overflow: Den den is used to hide them. For complex solutions, there are many methods of the hack class.