TD with content automatically adapts to width:
<TD style= "Word-wrap:break-word;word-break:break-all" width= "100px";></td>
Note:
the width of TD must be set
Word-wrap: Sets or retrieves whether the current row exceeds the bounds of the specified container to disconnect?> career change
Normal: Default value. Allow content to top open specified container boundary
Break-word: Content will wrap within the boundary. If necessary, word wrapping (Word-break) will also occur.
Word-break: Sets or retrieves the word wrapping behavior within the text within an object. Especially when there are multiple languages
Normal: Default value. Allow lines to be exchanged between words
Break-all: This behavior is the same as normal for Asian languages. It also allows non-Asian languages > lines to be disconnected within any word. This value is appropriate for Asian text that contains some non-Asian text
Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word is not allowed to break. Non-Asian text for small amounts of Asian text
CSS Properties: Word-wrap allows long words or URL addresses to wrap to the next line.
Instance: Allow long words to wrap to the next line:
p{Word-wrap:break-word;}
Value Description
Normal wraps only at the allowed hyphenation point (the browser keeps the default processing).
Break-word a line wrap inside a long word or URL address.
CSS Properties: White-space sets how to handle whitespace within an element.
Example: Specify that text in a paragraph does not wrap:
td{White-space:nowrap;}
Value Description
The normal (default) whitespace is ignored by the browser.
The pre blank is reserved by the browser. Behaves like a label in the HTML pre .
The nowrap text does not wrap, and the text continues on the same line until the label is encountered.
Pre-wrap preserves the sequence of whitespace characters, but normally wraps the line.
Pre-line merges a sequence of whitespace characters, but preserves line breaks.
Inherit specify that the value of the White-space attribute should be inherited from the parent element.
The text is displayed in one line, beyond the ellipsis : Need width (width:100px), overflow content hiding (overflow:hidden;), force on the same line (white-space:nowrap;), Ellipsis (text-overflow:ellipsis;)
p{ width:100px; Overflow:hidden; White-space:nowrap; Text-overflow:ellipsis;}