Shulou(Shulou.com)06/03 Report--

This article shows you how to solve the problem that CSS exceeds the specified width of the text and does not wrap the text with ellipsis, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

General text truncation (for inline and block):

CSS Code copies content to the clipboard

.text-overflow {display:block;/* inline object needs to be added * / width:31em;/* how to ask about hovertree.com * / word-break:keep-all;/* do not wrap * / whitewhite-space:nowrap;/* do not wrap * / overflow:hidden;/* hides the content beyond the width * / text-overflow:ellipsis / * display the ellipsis mark (.) when the text in the object overflows. It needs to be used with overflow:hidden;. * /}

Definition of table text overflow:

Display ellipses for tables that are out of range

CSS Code copies content to the clipboard

Table {width:em; table-layout:fixed;/* the following definition of td will only work if the layout algorithm of the table is defined as fixed. * /} td {width:%; word-break:keep-all;/* does not wrap * / whitewhite-space:nowrap;/* does not wrap * / overflow:hidden;/* content hides the content beyond the width * / text-overflow:ellipsis;/* displays the ellipsis mark (...) when the text in the object overflows; it needs to be used with overflow:hidden;. * /}

It is important to note that this CSS style only works on single-line text, and if you want to use it on multiple lines, only the first line works.

In this way, only IE will have "...". Other browser text will be hidden when it exceeds the specified width.

The above content is how to solve the problem that CSS exceeds the specified width of the text and does not wrap the text with ellipsis. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.