How to use CSS word-break properties in detail

Processing the text within the page will have a variety of line-wrapping situation occurs, then the elements of the page in what circumstances to do the line-wrapping operation? We can precisely control this line break by Word-break code.

Grammar:

Word-break:normal | Break-all | Keep-all

Parameters:

Normal: Allow line wrapping in words according to 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. Suitable for non-Asian texts containing small amounts of Asian text

Description

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.
The corresponding script attribute is wordbreak. Please refer to the other bibliography I have written.

Example:

div {word-break:break-all;}

Application code. We determine the parameters of the Word-break within the test element.

p.test {word-break:hyphenate;}

In terms of browser support, Word-break is still very well suited to the requirements. This code is basically supported by the browser.

The use of Word-break. Its default value is normal and its inheritance is yes its version is CSS3

The use of java. 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 scenarios for this code. Normal is the browser default. Break-all is a word wrap. Keep-all are half-width spaces or hyphens.

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.

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