Html table TD Content Wrap Line

Source: Internet
Author: User
TD with content automatically adapts to width:
<TD style= "Word-wrap:break-word;word-break:break-all" width= "100px";></td>

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:


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:


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;}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.