Use CSS to skillfully display ultra-long text content

In reality, some texts with relatively long content often appear. In order to make the overall layout look good, you need to control the text content in one line for display and take a certain length, and place the content in place of ellipsis. Although it can be controlled by dynamic languages, this is not conducive to search engine indexing. CSS can be used to solve this problem skillfully. See the following code: Code 1: it can be used for non-Table LI or span. text-overflow {display: block;/* inline objects need to be added */width: 31em; word-break: keep-all;/* Do not wrap */white-space: nowrap; /* Do not wrap */overflow: hidden;/* Hide content beyond the width of the content */text-overflow: ellipsis; /* when the object text overflows, the omitted mark (...) is displayed (...); must be used with overflow: hidden. */} Code 2: used for 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 in excess of the content when the content exceeds the width */text-overflow: ellipsis;/* display the omitted mark (...) when the text in the object overflows (...); must be used with overflow: hidden. */}