The text is forcibly hidden without line breaks, and the text is forcibly wrapped.

The text is forcibly hidden without line breaks, and the text is forcibly wrapped.

Record a simple css style, with emphasis: style = "width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;", which must have a width, white-space: nowrap; do not change

Line, overflow: hidden; hide unnecessary text, text-overflow: ellipsis; Convert unnecessary text... in this way, in table td, text is hidden without line breaks, but not perfect. The td width is still the width of the text that is not hidden.

If the text is opened, add style = "table-layout: fixed; width: 100%", table-layout: fixed; to the table. The width is fixed, and td is fixed. In this way, no matter the resolution on the screen is normal

Hide unnecessary text and control the width of table rows.

Extension:

1 word-break: break-all; takes effect only in English and uses letters as the line feed basis.

2 word-wrap: break-word; it only works for English and uses words as the basis for line feed.

3 white-space: pre-wrap; it only works for Chinese characters and forces line breaks.

4. white-space: nowrap; line feed is prohibited.

Word-break: break-all and word-wrap: break-word both enable automatic line feed of their containers such as DIV content. The difference between them is:

1. word-break: break-all
Assume that the div width is pixel PX, and its content will be automatically wrapped in pixel PX. If there is a long English word at the end of the line, it will cut off the word, and some parts will be kept at the end of the row, change the other part to the next line.

2. word-wrap: break-word
The example is the same as above, but the difference is that it will regard the entire word as a whole. If the end width of the row is insufficient to display the entire word, it will automatically put the entire word in the next line, instead of truncating words.