CSS Implementation Force no Line break/wrap/Force line wrapping

In our daily coding, we often encounter this text can not be wrapped, or automatic line-wrapping requirements. Although this feature is common in our usual but I believe that we will not be able to remember it (at least, Xiao Yue is very lazy is always what to look for what to find ♦ hehe ... ）。 Today we will learn how to master the use of CSS to implement the force of the text line/word wrap/Force line wrapping method. The need of partners can come to study together Oh!

1. Force No Line break

Div {    white-space:nowrap;}

2. Automatic line Wrapping

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

3. Force English words to break

Div {    word-break:break-all;}

4. CSS settings do not change careers:

• Overflow:hidden Hidden
• White-space:normal Default
• Pre line breaks and other whitespace characters are protected
• NoWrap force all text to be displayed in the same line until the text ends or encounters a BR object

5. Set the forced line break:

• Word-break:
• normal; Allows word wrapping in words in Asian and non-Asian language text rules
• Break-all: The behavior is the same as in Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is appropriate for Asian text that contains some non-Asian text
• Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. A high-resolution solution for non-Asian texts with small amounts of Asian text

No line break in English

Add Word-break:break-all in CSS; Problem solving. This problem only IE has, under the FF test, FF can add their own scroll bar, this does not affect the effect suggested that when you do the skin, remember in the body Riga Word-break:break-all; This can solve the problem of IE's framework is open in English the following reference Word-break, note that Word-break is ie5+ proprietary properties

Syntax: Word-break:normal | Break-all | Keep-all parameter: Normal: Allows word wrapping in words according to the rules of Asian and non-Asian languages Break-all: This behavior is the same as the normal for Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is appropriate for Asian text keep-all that contains some non-Asian text: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. For non-Asian text descriptions that contain small amounts of Asian text: Sets or retrieves the word wrapping behavior of text within an object. Especially when multiple languages are present. For Chinese, break-all should be used.

Have you finished your study?  Remember to practice a lot Oh! Make a little progress every day!¤¤

CSS Implementation Force no Line break/wrap/Force line wrapping