Home > Developer > CSS

CSS disables text wrap code

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the td or div attribute of this line of text, add

The code is as follows:

Style = "word-break: break-all ;"

Example

The code is as follows: Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> disable automatic line feed with CSS </title>
<Style type = "text/css">
P {white-space: nowrap}
</Style>
</Head>
 
<Body>
<P> This is a text test that disables automatic line breaks. This is a text test that disables automatic line breaks, this is a text test that disables automatic line breaks, this is a text test that disables automatic line breaks. <p>
</Body>
</Html>

The effect is as follows:

 

In the following example, the text can be wrapped only when spaces or line breaks are encountered, for example:

The code is as follows: Copy code

<Style type = "text/css">
Div {width: 300px; border: 1px solid red; margin: 10px; overflow: hidden ;}
. Nowrap {white-space: nowrap ;}
</Style>
<Div class = "nowrap"> This is a long piece of text with no spaces or line breaks in it. It does not automatically wrap the text until it is truncated. </div>
<Div> This is a long text with no spaces or line breaks in the middle, but it will automatically wrap </div>

The text in the above two divs is too wide. The line feed in the first one is forbidden, and the text in the extra width is intercepted. The second one is not set, so the text is automatically wrapped.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More