Detailed explanation of p tag text wrapping or not wrapping and text hiding in html

When we layout our web pages, we use the p tag. Usually the p tag contains Chinese text or text from other countries. The text will have line breaks. Let’s talk about the p tag text wrapping and forcing it not to wrap. And text hiding:
1. English line break

Div p{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
Div p{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/

Note that sometimes English words are a whole and cannot be separated! ! !
2. Chinese line breaks and forced non-line breaks

Div p{white-space:pre-wrap;width:150px;}/*只对中文起作用，强制换行*/
Div p{white-space:nowrap;width:10px;}/*强制不换行，都起作用*/

3. Forced non-line breaks and hiding of text beyond the width

.p5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/

Be sure to pay attention to div or There must be a width in the p tag before it can be wrapped, otherwise it will have no effect! ! !

Parameters:
normal: In accordance with the text rules of Asian and non-Asian languages, line breaks are allowed within words
break-all: The Behavior Same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text
keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Suitable for non-Asian text that contains a small amount of Asian text

The above is the detailed content of Detailed explanation of p tag text wrapping or not wrapping and text hiding in html. For more information, please follow other related articles on the PHP Chinese website!