How to Use CSS to hide content beyond the display width

Tutorial on how to use CSS to hide content beyond the display width. It should be noted that this stuff is only effective for a single line of text. If you want to use it on multiple lines, it only works for the first line. This method is only written in IE, where "..." is hidden when the text of other browsers exceeds the specified width.

Reference content is as follows: . Text-overflow { Display: block;/* Add inline objects */ Width: 31em;/* specify the width */ Word-break: keep-all;/* Do not wrap */ White-space: nowrap;/* force all texts to be displayed in the same row until the text ends or br objects are encountered. Do not wrap */ Overflow: hidden;/* Hide the content beyond the width of the content */ Text-overflow: ellipsis;/* Private Attribute of IE. When the text in the object overflows, the omitted mark (...) is displayed. It must be used with overflow: hidden. */ }

Definition of table text overflow:

Reference content is as follows: 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. */ }