How to implement css without line wrapping, automatic line wrapping, and forced line wrapping_Experience exchange

Force no line break

div{
white-space:nowrap;
}

Automatically wrap

div{
word-wrap: break-word ;
word-break: normal;
}

Force English word line break

div{
word-break:break-all;
}



CSS settings do not wrap:


overflow:hidden hidden
white-space: normal default
pre line breaks and other whitespace characters will be protectednowrap forces all text to be displayed on the same line until the end of the text or encountering the br object


Set forced line break:
word-break:
normal ; According to Asian and non-Asian languages Text rules that allow line breaks within words
break-all: This behavior is the 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. A highly suitable solution for non-Asian text that contains a small amount of Asian text



English does not break lines

Add word-break: break-all; to CSS Problem Solving . This problem only exists in IE. When tested under FF, FF can add scroll bars by itself, which does not affect the effect

It is recommended that when doing Skin, remember to add word-break: break-all; in the body. This will work Solve the problem of IE's frame being stretched by English

The following quotes the instructions of word-break. Note that word-break is a proprietary attribute of IE5

Syntax:

word-break : normal | break-all | keep-all

Parameters:

normal : Allow line breaks within words according to text rules for Asian and non-Asian languages
break-all : The Behavior is the 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

Description:

Sets or retrieves the intraword wrapping behavior for text within an object. Especially when multiple languages ​​appear.
For Chinese, break-all should be used.
The corresponding script feature is wordBreak. Please see other books I have written.

Example:

div {word-break : break-all; }