Solve the problem of HTML div css forcing line breaks without line breaks._html/css_WEB-ITnose

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

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

2. css automatic line wrapping
div{ word-wrap: break-word; word-break: normal; }

3. css forced English Word break
div{word-break:break-all;}

If the divs are nested, and you want the inner div to automatically wrap according to the content, you can only set the width of the outer div, and white- span:nowrap is enough.

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

The difference between them is that :

1, word-break:break-all For example, if the div is 200px wide, its content will automatically wrap to 200px. If there is a long English word at the end of the line (congratulation, etc.), it will wrap the word Truncated, the end of the line becomes 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 : Allow line breaks within words according to text rules for Asian and non-Asian languages ​​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. Suitable for non-Asian text that contains a small amount of Asian text Syntax: word-wrap: normal | break-word Parameters: normal: Allow content to push against the specified container boundary break-word: Content will wrap within the boundary. 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 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.