CSS sets no line break when the text in a row exceeds the width

When a line of text exceeds the Div or table width, the browser will display it with a line break by default. What should we do if we don't want it to display with a line break? When you see this title, you can easily think of cutting the text and adding.

Common text truncation (applicable to inline and block ):

================== CSS ==========================
. Text-overflow {
Display: block;/* Add inline objects */
Width: 31em;
Word-break: Keep-all;/* Do not wrap */
White-space: nowrap;/* Do not wrap */
Overflow: hidden;/* Hide the content beyond the width of the content */
Text-overflow: ellipsis;/* indicates the omitted mark (...) when the text in the object overflows. It must be used with overflow: hidden. */
}
======================================

The table is defined differently:

================== CSS ==========================
Table {
Width: 30em;
Table-layout: fixed;/* the following definition of TD takes effect only when the table layout algorithm is defined as fixed. */
}
TD {
Width: 100%;
Word-break: Keep-all;/* Do not wrap */
White-space: nowrap;/* Do not wrap */
Overflow: hidden;/* Hide the content beyond the width of the content */
Text-overflow: ellipsis;/* indicates the omitted mark (...) when the text in the object overflows. It must be used with overflow: hidden. */
}
======================================

Note: This is only effective for a single line of text. If you want to use it on multiple lines, only the first line will work. This method is only written in IE, where "..." is hidden when the text of other browsers exceeds the specified width.

Experience: When do I need to use text without line breaks? Theoretically, English letters are arranged in a block container and will not wrap the lines according to the container width. It will keep the container large. In the absence of special definitions, Chinese characters are automatically wrapped. This is an advantage, saving us a lot of trouble, but there are also bad times, such:

The online user name is returned.

We do not need text to be capable of meeting rows at this time, so we add the white-space: nowrap; attribute to the text container so that it will be automatically topped to the next line.

The above is taken from other people's websites. Here, we need to add: when using in a table, except that the table header can be set to the degree of parallelism, other rows do not work after being set to the degree of parallelism. Also: white-space: nowrap;/* Do not wrap */This does not work here.