css3 text-overflow和word-wrap_html/css_WEB-ITnose-HTML Tutorial-php.cn

css3 text-overflow和word-wrap_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:37

Original

1645 people have browsed it

1. text-overflow

is used to set whether to use the omission mark when the text overflows (...)

text-overflow:clip|ellipsis

clip, Overflow content is cropped, elipsis: Overflow content is represented by ellipses.

Note: text-overflow only explains how text overflow is displayed. To truly achieve the effect of overflow producing ellipsis, you also need to define to force text to be displayed in one line (white-space:nowrap ) and overflow content is hidden (overflow:hidden).

<style type="text/css">div{    width: 100px;    background-color: #ccc;}.ellipsis{    text-overflow:ellipsis;    overflow: hidden;    white-space: nowrap;}.clip{    text-overflow:clip;    overflow: hidden;    white-space: nowrap;}</style><body>    <div class="ellipsis">文本内容文本内容文本内容文本内容</div>    <br/><div class="clip">文本内容文本内容文本内容文本内容</div></body>

Copy after login

2. word-wrap

word-wrap can also be used to set the text behavior, whether to break the line when the current line overflows.

word-wrap:normal|break-word

normal: browser default value, break-word setting Commonly used. 1. Comparison between word-wrap and word-break

Both of them are used to break sentences within words.

word-wrap: Controls line breaks, and when overflow indicates whether the browser is allowed to break sentences within a word. This is to prevent overflow when a string is too long and its natural break point cannot be found.

word-break: Indicates how to break sentences within a word.

Example: word-wrap:

<style type="text/css">div{    width: 200px;    height: 100px;    background-color: #ccc;}.bw{    word-wrap:break-word;}.normal{    /*word-wrap:normal;*/}.wb{    word-break:break-all;}</style><body><h2>word-wrap:normal</h2><br/><div class="normal">a long word ddddddddddddddddddddddddddddddddd  a long word</div><h2>word-wrap:break-word</h2><br/><div class="bw">a long word ddddddddddddddddddddddddddddddddd  a long word</div><h2>word-break:break-all</h2><br/><div class="wb">a long word ddddddddddddddddddddddddddddddddd  a long word</div></body>

Copy after login

It can be seen that the behavior of word-wrap is:

encountered When a long word cannot be placed on one line, it is first moved to a new line and placed on the next line. If the value of word-wrap is the default normal, then the string will overflow if it is too long and cannot find a natural break point. You can use word-wrap:break-word to force sentence breaking.

The performance behavior of break-word is: simple and crude, it breaks sentences directly within the word, saving space, and does not try to put a long string on the next line.

Word-wrap does not work when there is a break-word. Therefore, many people will write word-wrap:break-word;word-break:break-all; when breaking sentences. In fact, it is not necessary, as long as word-break:break-all is enough.