CSS---Resolve too much content will be out of text overflow (shown outside the area, do not wrap the case)

Source: Internet
Author: User


When we set my div, or a fixed width of another text box, the text will overflow (shown outside the area without wrapping).

At this point we can use several of the CSS in the solution. There are three of the following that can solve the problem:

The 1,word-break property specifies how the wrap is handled.
Word-break:normal|break-all|keep-all;
Value Description
Normal uses the browser's default line-wrapping rule.
Break-all allows line wrapping within a word.
Keep-all can only wrap at half-width spaces or hyphens.
The 2,overflow property specifies what happens when the content overflows the element box.
Value Description
Visible default value. The content is not trimmed and is rendered outside the element box.
Hidden content is trimmed, and the rest is not visible.
Scroll content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
Inherit specifies that the value of the overflow property should be inherited from the parent element. The 3,white-space property sets how to handle whitespace within an element.

Value Description
Normal default. The blank will be ignored by the browser.
The pre blank is reserved by the browser. It behaves like a <pre> tag in HTML.
The nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered.
Pre-wrap preserves a sequence of whitespace characters, but wraps normally.
Pre-line merges a sequence of whitespace characters, but preserves newline characters.
Inherit specifies that the value of the White-space property should be inherited from the parent element.
I'm using Word-break:break-all to wrap the text, because our characters are Chinese, which causes a problem with the line change. Use overflow to make a scroll bar, if it is

Scroll bars are allowed to be used. White-space is a blank character in the text, if the text contains a lot of white space characters we can consider adding this attribute.

CSS---Resolve too much content will be out of text overflow (shown outside the area, do not wrap the case)

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: info-contact@alibabacloud.com 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.