CSS Wrap, Force no wrap, force line breaks, out of display ellipses

Source: Internet
Author: User

P tags are automatically wrapped by default, so after setting the width, it is better to achieve the effect, but the recent project found that after using AJAX loading data, the contents of the P tag is not wrapped, resulting in a layout confusion, and then try to use a newline style, although solve the problem, but did not find the essential reason, The essence is that the data I get at that time is a long list of numbers, and the browser should be similar to the way the numbers and English words are handled, not truncated.
Give a variety of ways, and then specify each of the properties.
Force No Line break
p {white-space:nowrap;}

Wrap Line
p {Word-wrap:break-word;}

Force English words to break
p {word-break:break-all;}

* Note: Setting forces the English word to break, you need to set the inline element as a block-level element.

Out of display ellipses
P{text-overflow:ellipsis;overflow:hidden;}

White-space:normal|pre|nowrap|pre-wrap|pre-line|inherit;
White-space property setting How to handle whitespace inside an element
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.

Word-wrap:normal|break-word;
The Word-wrap property is used to indicate whether the browser is allowed to segment within a word, which is to prevent overflow when a string is too long and cannot find its natural segmentation point.
Normal: line break only at allowed hyphenation points (browser keeps default processing)
Break-word: Line wrapping inside a long word or URL address
Word-break:normal|break-all|keep-all;

The Word-break attribute is used to indicate how words are segmented within a word.
Normal: Use the browser's default line-wrapping rule.
Break-all: Allow word wrapping in words
Keep-all: Wrap only in half-width spaces or hyphens

For example, look at the difference:

<!doctype html><html lang="en">    <head>    <!--website encoding format, UTF-8 International code, GBK or gb2312 Chinese encoding--        <meta http-equiv="Content-type" content="Text/html;charset=utf-8" />        <meta name="Keywords" content="keyword One, keyword two">        <meta name="Description" content ="site description">         <meta name="Author" content="Yvette Lau">        <title>Document</title>        <!--the introduction of CSS JS files--        <style>            . Word{background:#E4FFE9;  width: +px;  margin:px Auto;  padding:px;  font-family:"Microsoft Yahei"; }            / * Force No Line break * /            . nowrap{white-space:nowrap;}             / * Allow word segmentation, first try to move to the next line, to see the width of the next line is enough, not enough words within the word * * *            . Breakword{word-wrap: break-word;}             /* In the segmentation, you will not move the long word to the next line, but the sentence within the word * *            . Breakall{word-break:break-all;}                         /* out-of- section display ellipsis * /            . Ellipsis{text-overflow:ellipsis;  overflow:hidden; }        </style>    </head>    <body>        <div class = "word" >            <p class = "nowrap" >Wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</P>                      <p class = "breakword" >Wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</P>            <p class = "breakall" >Wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</P>            <p class = "normal" >Wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</P>            <p class = "ellipsis" >Wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</P>        </div>    </body></html>

The effect is as follows:

CSS Wrap, Force no wrap, force line breaks, out of display ellipses

Related Article

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.