Introduction to CSS's method of automatically wrapping English words

CSS allows automatic line wrapping of English words
In the process of making web pages and writing css styles, you may encounter the problem of word wrapping. English line wrapping may trouble many beginners, and today I will talk about this problem To elaborate accordingly, friends who have studied CSS should all know that controlling whether text breaks or not can be adjusted directly by using word-break in CSS. However, for English, we need to make it meet the needs of all browsers, just This one attribute is not enough.
According to some information that I personally know, too much English and too long not only affect the form, but also affect the p. It may break the form and p. There are different solutions to the form and p. , first let’s look at how to solve this problem in the form.
If you are using a table layout, and the content in the table is mostly in English, and English will not wrap, then you only need to add the following code to the css
table {
table-layout : fixed; word-break:break-all;
word-wrap:break-word;
}
If you use p+css layout, then when the text in p is broken by English , you can add the following code to css
p{
word-break:break-all;
word-wrap:break-word;
}
According to CSS2 Chinese manual
word -break version: IE5+ proprietary attribute inheritance: yes
Syntax:
word-break: normal | break-all | keep-all
Value:
normal: default value, allowed in words Break-all
break-all: This behavior is the same as normal in 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 of the text within the object. Especially when multiple languages ​​appear.
For Chinese, break-all should be used.
This property is read-only for the currentStyle object. For other objects can be read and written.
The corresponding script feature is wordBreak.
Example:
p {word-break : break-all; }
Applies to:
IE5.0+
word-wrap version: IE5.5+ Proprietary property inheritance: There is
Syntax:
word-wrap: normal | break-word
Value:
normal: Default value. Allow content to break the specified container boundary
break-word: Content will break within the boundary. If necessary, intra-word line breaks (word-break) will also occur
Description:
Set or retrieve whether to break the line break when the current line exceeds the boundary of the specified container.
This property only works on objects with layout, such as block objects. To use this attribute on an inline element, you must first set the object's height or width attributes, or set the position attribute to absolute , or set the display attribute to block .
This property is read-only for the currentStyle object. For other objects can be read and written.
The corresponding script feature is wordWrap.
Example:
p { word-wrap: break-word; word-break: break-all; }
Note this
break-word: The content will wrap within the boundary. If necessary, intra-word line breaks (word-break) will also occur
So word-wrap is enough. By default, words will not be separated and broken, but if there is a very long word, such as the wrong version last time The 12 scariest English words in history can also be broken into lines, thus preventing the table from being damaged.
However, this has not been adopted as a css2 standard by w3c, so Mozilla does not support this attribute. If everyone writes English words well, it will be fine. Firefox does not split words and wrap them in new lines. If someone writes a very long word, Mozilla Firefox won't break new lines all the time.

The above is the detailed content of Introduction to CSS's method of automatically wrapping English words. For more information, please follow other related articles on the PHP Chinese website!