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 sets how to handle whitespace inside an element
pre Blank will be reserved by the browser. It behaves like a pre tag in HTML.  
nowrap text does not wrap, 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 combines a sequence of whitespace characters, but preserves newline characters.  
inherit specifies that the value of the White-space attribute 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
<pre name= "code" class= "HTML" ><!doctype 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
