Introduction to the specific usage of css word-break attribute

Various line breaks will occur when processing text in a web page. So under what circumstances do page elements perform line breaks? We can precisely control this line break through the word-break code.

Grammar:

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

Parameters:

normal: In accordance with the text rules of Asian and non-Asian languages, line breaks within words are allowed
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.
The corresponding script feature is wordBreak. Please see other books I have written.

Example:

div {word-break : break-all; }

Application code. We determined the parameters for word-break within the test element.

p.test {word-break:hyphenate;}

In terms of browser support, word-break still meets the requirements very well. Most browsers support this code.

How to use word-break. Its default value is normal Its inheritance property is yes Its version is CSS3

java usage. object.style.wordBreak="keep-all"In this java statement, we give a different parameter value.

The syntax of the code.

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

There are three different situations in this code. normal is the browser default. break-all is a line break within a word. keep-all is a half-width space or hyphen.

style process, we give two different ways for learners to compare. At the same time, we can also see that the definition of the outer frame is also enabled at the same time.

<style> 
p.test1
{
width:13em; 
border:2px solid #000000;
word-break:hyphenate;
}

p.test2
{
width:13em; 
border:2px solid red;
word-break:break-all;
}
</style>

The above is the detailed content of Introduction to the specific usage of css word-break attribute. For more information, please follow other related articles on the PHP Chinese website!