wordpressNot available in default installationHyphenationsentence breakfunction, sometimes a longer English word will run out of the screen. It is very simple to modify English word and sentence breaks and automatic line wrapping. Just add a few days rule in css.
First you need to install a program that can insert code inplug-in. Search for Insert Headers and Footers in the installation plug-in. After installing Insert Headers and Footers, add
Some examples of modifying CSS English word segmentation, sentence segmentation, and line breaks:
Chinese and English sentence breaking and line breaking
{ word-break: keep-all; word-wrap: break-word; white-space: pre-wrap; text-align:justify; text-justify:inter-ideograph; }
word-wrap: break-word, only works in English, using words as the basis for line breaks. white-space: pre-wrap, only works for Chinese, forcing line breaks. text-align:justify, align both ends of CSS English statements:
Disable line breaks in article content:
{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
text-overflow:ellipsis, let the extra content be expressed with ellipsis... But this attribute is mainly used in browsers such as IE.
If a single line of text exceeds 3 lines, use an ellipsis:
.text { width:800px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
word-break: (When a word cannot be placed at the end of the line, determine how to place the word inside.)
normal | Use the browser's default line wrapping rules. |
break-all | Line breaks within words are allowed. Force it up, and if it can't fit in, the rest will be displayed on the next line. |
keep-all | Line breaks can only be made at half-width spaces or hyphens. If you can’t let it go, then display it in another line. If you can’t let it go, don’t shrink back. |
word-wrap: (When the end of the line cannot fit, determine whether line breaks are allowed within the word)
normal | If the word is too long, it will be displayed in a new line. If it exceeds one line, it will overflow. |
break-word | When the word is too long, first try to wrap it in a new line. After the word wraps, it is still too long. You can also wrap the word in a new line. |
white-space:
pre | All spaces and carriage returns are retained, and line breaks are not allowed. |
pre-wrap | Preserve all spaces and carriage returns, but allow line breaks. |
pre-line | Spaces will be merged, and line breaks are allowed. |
text-align:
justify | Specifically designed for English to align both ends of English sentences |
text-justify:
auto | default value. allow browseractingThe user determines the alignment rule to use. |
distribute | Handles spaces much like newspaper, suitable for East Asian documents. Especially Thai. |
distribute-all-lines | Justified lines work in the same way as distribute, and also do not include the last line of the two justified paragraphs. Applies to ideographic documents |
distribute-center-last | Not implemented. |
inter-cluster | Adjust text to lines without spaces between words. This mode adjustment is used to optimize Asian language documents. |
inter-ideograph | Provides full justification for ideographic text. He adds or subtracts ideograms and spaces between words |
inter-word | Align text by adding space between words. This behavior is the fastest way to align all lines of text. Its justified behavior has no effect on the last line of a paragraph |
kashida | Adjusts text by elongating characters at selected points. This adjustment mode is provided specifically for Arabic script languages. |
newspaper | Align text by increasing or decreasing the space between words or letters. is the most precise format for justifying the Latin alphabet |
illustrate: | Sets or retrieves the alignment used to adjust text within the object. Because this property affects text layout, the text-align property must be set to justify. This property only works on block objects. This property is read-only for the currentStyle object. For other objects can be read and written. The corresponding script attribute is textJustify. |