Shulou(Shulou.com)06/01 Report--

This article mainly introduces "CSS how to achieve mandatory line wrapping and non-line wrapping in the container". In the daily operation, I believe that many people have doubts about how to achieve mandatory line wrapping and non-line wrapping in the container in CSS. I have consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to achieve mandatory line wrapping and non-line wrapping in the container with CSS". Next, please follow the editor to study!

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

The code is as follows:

Hello, my friend. Why can't I see the effect?

2. Css automatic line wrapping

The code is as follows:

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

3. Css forces English words to be broken.

The code is as follows:

Div {word-break:break-all;}

If the div is nested, to make the inner div wrap automatically according to the content, you can only set the outer div width and white-spance:nowrap.

Both word-break:break-all and word-wrap:break-word wrap the contents of their containers such as DIV automatically.

The difference between them is:

For example, div wide 200px, its content will automatically wrap to 200px. If there is a very long English word at the end of the line (congratulation, etc.), it will truncate the word and become the back part of the line ending with conra (the front part of congratulation) and the next behavior tulation (conguatulation).

The example of congratulation wrapbreak word is the same as above, but the difference is that it treats the whole word as a whole, and if the end of the line is not wide enough to display the whole word, it will automatically put the whole word on the next line without truncating it.

3 the supported version of IE5: this behavior is the same as that of normal in Asian languages. Disconnection within any word of a non-Asian language text line is also allowed. This value is suitable for Asian text that contains some non-Asian text.

WORD-WRAP:break-word supported version: the content above IE5.5 will wrap within the boundary.

If necessary, word-break will also occur. The form is automatically wrapped to avoid being stretched.

Word-break: normal | break-all | keep-all

Parameters:

Normal: word wrapping is allowed in accordance with the text rules of Asian and non-Asian languages

Break-all: this behavior is the same as normal for Asian languages. Disconnection within any word of a non-Asian language text line is also allowed. This value is suitable for Asian texts that contain some non-Asian text

Keep-all: same as normal for all non-Asian languages. For Chinese, Korean and Japanese, word disconnection is not allowed. Suitable for non-Asian text grammars that contain a small amount of Asian text:

Word-wrap: normal | break-word

Parameters:

Normal: allows content to top open specified container boundaries

Break-word: the content will wrap within the boundary. If necessary, word-break also occurs: sets or retrieves whether to break a line break when the previous line exceeds the boundary of the specified container.

The corresponding script feature is wordWrap. Please refer to other bibliographies I have written. Syntax: table-layout: auto | fixed parameter: auto: default automatic algorithm. The layout will be based on the contents of each cell. The table is not displayed until each cell has been read and calculated. Very slow fixed: fixed layout algorithm. In this algorithm, the horizontal layout is only based on the width of the table, the width of the table border, the cell spacing, the width of the column, and has nothing to do with the content of the table description: set or retrieve the layout algorithm of the table. The corresponding script feature is tableLayout.

Suggestion: word-break 3C detection will show problems, resulting in Baidu snapshot will also have problems-this attribute OPERA FIREFOX browser does not support word-break attribute can be replaced with white-space:normal;, so that under FireFox and IE can be correctly wrapped, and note that the space between words can not be used to replace, otherwise can not be correctly wrapped.

At this point, the study on "how CSS implements mandatory line wrapping and no line wrapping in the container" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.