Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
