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

Today, I will talk to you about how div+CSS sets the text within a line to exceed the width without wrapping and not displaying truncated text. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

When a line of text exceeds the width of DIV or Table, the browser defaults to let it wrap. What if we don't want it to wrap? When you see this title, it's easy to think of truncating the text and adding "." The way to do it.

General text truncation (for inline and block):

= CSS=

The code is as follows:

. text-overflow {

Display:block;/* inline objects need to be added * /

Width:31em

Word-break:keep-all;/* does not wrap * /

White-space:nowrap;/* does not wrap * /

Hide the content beyond the width when overflow:hidden;/* content exceeds the width * /

Text-overflow:ellipsis;/* displays an ellipsis mark (...) when text overflows within an object; it needs to be used with overflow:hidden;. , /

}

= =

For tables, the definition is a little different:

= CSS=

The code is as follows:

Table {

Width:30em

The following definition of td will work only if table-layout:fixed;/* defines the layout algorithm of the table as fixed. , /

}

Td {

Width:100%

Word-break:keep-all;/* does not wrap * /

White-space:nowrap;/* does not wrap * /

Hide the content beyond the width when overflow:hidden;/* content exceeds the width * /

Text-overflow:ellipsis;/* displays an ellipsis mark (...) when text overflows within an object; it needs to be used with overflow:hidden;. , /

}

= =

Note: this thing 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.

After reading the above, how do you set div+CSS to set text beyond the width of a line without wrapping and not displaying truncated text? Do you have any further understanding? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.