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

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.