Home >Web Front-end >CSS Tutorial >css implements forced non-line wrapping/automatic line wrapping/forced line wrapping

css implements forced non-line wrapping/automatic line wrapping/forced line wrapping

高洛峰
高洛峰Original
2016-11-24 11:30:261452browse

Force no line wrapping div{
white-space:nowrap;
}

Automatic line wrapping

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

Force English words to break

div{
word-break:break-all;
}


CSS settings do not break:


overflow: hidden hide
white-space: normal Default
pre Line breaks and other whitespace characters will be protected
nowrap 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 the text rules of Asian and non-Asian languages, line breaks within words are allowed
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 wrap

Add word-break: break-all; in CSS to solve the problem. 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 can solve the IE framework The problem of 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: 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. Suitable for non-Asian text that contains a small amount of Asian text

Description:

Sets or retrieves the intra-word 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; }
If you want IE6 to be compatible: div {WORD-WRAP:break-word;word-break : break-all; }

Statement:
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