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

This article mainly talks about "what are the differences between word-break:break-all and word-wrap:break-word". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the difference between word-break:break-all and word-wrap:break-word"?

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 Parameter: normal: word wrapping is allowed in accordance with the text rules for 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 text keep-all that contains some non-Asian text: the same as normal for all non-Asian languages. For Chinese, Korean and Japanese, word disconnection is not allowed. Suitable for non-Asian text syntax that contains a small amount of Asian text: word-wrap: normal | break-word parameter: normal: allow content to top open the specified container boundary 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, I believe you have a deeper understanding of "what are the differences between word-break:break-all and word-wrap:break-word". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.