Prevent tables/layers from bursting and words from breaking Prevent the form from being burst This problem has been mentioned by many people, and I later solved it in the early version, but it caused the English words to be broken up and wrapped in new lines, so when I made the new template, I did not add some css code to control this. I tried it today and found that the solution is very simple. table-layout:fixed;word-break:break-all;word-wrap:break-word;} div{word-break:break-all;word-wrap:break-word;} Later, I found that by rewriting the above code, I could prevent both tables/layers from breaking and words from breaking. table { This is also the code I use now. According to the CSS2 Chinese manual by Rainer Su word-break version: IE5+ proprietary properties inheritance: yes Syntax: illustrate: word-wrap version: IE5.5+ proprietary properties inheritance: yes Syntax: illustrate: So word-wrap is enough. By default, words will not be broken into new lines. However, if there is a very long word, such as the wrong version of the 12 scariest English words in history, it will also break lines. This prevents the form from being damaged.
It can be said that the problem of automatic line wrapping of English words has tortured many people. If a word is written for a long time, the table will be broken, but if it is ignored, the English words will be split.
According to most articles on the Internet, just add:
code
...........
table {
This can solve the problem of broken tables and layers. This is what I did at first. However, such code will cause a problem. You will find that all English words are truncated, which is not in line with English writing habits and is not conducive to reading.
as follows:
code
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
-------------------------------------------------- ---
word-break: normal | break-all | keep-all
Value:
normal: default value. Allow line breaks between words
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. Good for non-Asian text that contains a small amount of Asian text
Sets or retrieves the intraword wrapping behavior for text within an object. Especially when multiple languages appear.
For Chinese, break-all should be used.
This property is read-only for the currentStyle object. It is readable and writable by other objects.
The corresponding script feature is wordBreak.
Example:
div {word-break : break-all; }
Applies to:
IE5.0+
word-wrap : normal | break-word
Value:
normal: default value. Allow content to extend beyond the specified container boundaries
break-word : Content will break within boundaries. If necessary, word-break will also occur
Sets or retrieves whether to break the line when the current line exceeds the boundary of the specified container.
This property only works on layout objects, such as block objects. To use this attribute for inline elements, you must first set the object's height or width attribute, or set the position attribute to absolute, or set the display attribute to block.
This property is read-only for the currentStyle object. It is readable and writable by other objects.
The corresponding script feature is wordWrap.
Example:
div { word-wrap: break-word; word-break: break-all; }
Pay attention to this
break-word : Content will break within boundaries. If necessary, word-break will also occur
However, this is not adopted as a css2 standard by w3c, so Mozilla does not support this attribute. If everyone writes English words well, it will be fine. Firefox does not split words and wrap them in new lines. If someone writes a long word, Mozilla Firefox will It won't break the line and it will break.
I don’t know if CSS3 will accept this attribute, but to be honest, words that are too BT are better...