Implementation of forced line breaks and no line breaks in div, td, p and other containers in html_HTML/Xhtml_Web page production

1. Force no line breaks and end with an ellipsis.

Copy code

The code is as follows:

Hello friends, friends, friends, why can’t I see the effect?

2. CSS automatic line wrapping

Copy code

The code is as follows:

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

3. CSS forces English word line break

Copy Code

The code is as follows:

div{word-break:break-all;}

If the divs are nested, the inner If the layer div automatically wraps according to the content, you can only set the outer div width and white-spance:nowrap.

word-break:break-all and word-wrap:break-word both enable the contents of containers such as DIV to wrap automatically

The difference is:

1, word-break:break-all For example, if a div is 200px wide, its content will automatically wrap at 200px. If there is a long English word at the end of the line (congratulation, etc.), it will truncate the word and turn it into the line The end is conra (the front-end part of congratulation), and the next line is the back-end part of tulation (conguatulation).

2. The word-wrap:break-word example is the same as above, but the difference is that it will congratulate the entire word as a whole. If the end of the line is not wide enough to display the entire word, it will automatically congratulate the entire word. Put it on the next line without truncating the word.

3, word-break;break-all Supported version: IE5 or above 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.

WORD-WRAP:break-word Supported version: IE5.5 or above The content will be wrapped within the boundary.

If necessary, word-break will also occur. The table automatically wraps to avoid stretching.

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

Parameters:

normal : According to the text rules of Asian and non-Asian languages, allowed within words Line break

break-all: This behavior is the same as normal for 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. Syntax suitable for non-Asian text that contains a small amount of Asian text:

word-wrap : normal | break-word

Parameters:

normal : Allow content to break the specified container boundaries

break-word : The content will break within the boundaries. If necessary, word-break also occurs. Description: Sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container. The corresponding script feature of

is wordWrap. Please see other books I have written. Syntax: table-layout: auto | fixed Parameters: auto: Default automatic algorithm. The layout will be based on the contents of each cell. The table will not be displayed until each cell is read and calculated. Very slow fixed: Fixed layout algorithm. In this algorithm, the horizontal layout is based only on the width of the table, the width of the table border, the cell spacing, and the width of the columns, and has nothing to do with the content of the table. Description: Set or retrieve the layout algorithm of the table. The corresponding script attribute is tableLayout.

Suggestion: 3C detection of word-break will show problems, which will also cause problems in Baidu snapshots - this attribute OPERA FIREFOX browser does not support the word-break attribute and can be replaced by white-space:normal; , so that the line breaks can be correct under FireFox and IE, and it should be noted that the spaces between words cannot be used to replace them, otherwise the line breaks will not be correct.