HTML div css forces line break without line break

高洛峰
Release: 2016-11-24 13:39:12
Original
4734 people have browsed it

1. Force no line breaks and end with an ellipsis.


Hello friends, friends, friends, why can’t I see the effect

2. CSS automatically wraps lines
div{ word-wrap: break-word; word-break: normal; }

3. CSS forces English words to break
div{word-break:break-all;}
If divs are nested, To make the inner div automatically wrap according to the content, you can only set the width of the outer div and white-spance:nowrap.

word-break:break-all and word-wrap:break-word both enable the content of its container such as DIV to automatically wrap
Their difference is:
1, word-break:break-all For example, the div width is 200px , its content will automatically wrap to 200px. If there is a long English word at the end of the line (congratulation, etc.), it will truncate the word and turn it into conra (the front part of congratulation) at the end of the line, and the next line will be tulation (conguatulation) of the backend part.
2. The word-wrap:break-word example is the same as above, but the difference is that it will congratulate the entire word as a whole. If the end of the line is not wide enough to display the entire word, it will automatically put the entire word on the next line. without truncating the words.


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template