Web front-end design: HTML forced non-wrapping <nobr> tag Usage code example

Source: Internet
Author: User

In the layout of a Web page, such as the title of the article List, no matter how much text does not want to wrap the display, you need to force on the line to display the content. This can be achieved by nobr tags. It plays the same role as the Word-break:keep-all. NOBR is the abbreviation for no break, which means that the line is forbidden. A document that is typically displayed on a browser wraps itself when it reaches the bottom of the browser's banner, but does not wrap if the text is included in the <nobr>~</nobr> tag. collected and collated by Www.169it.com

First, nobr grammar

1 <nobr>内容</nobr>

The non-wrapping content is placed between <nobr> and </nobr>, which is the same as the CSS white-space function.

Second, nobr label features:

If you do not encounter a BR wrap label, the content is displayed on a single line, such as a BR wrap label, the content will be added to the BR line wrap.

<nobr> as a label for defining appearances, is not used in the consortium. To use a stylesheet to suppress line breaks, specify NoWrap in the White-space. Examples of nowrap use are:

123 <divstyle="white-space: nowrap;">即使浏览器的横幅不够,这里也不会换行。</div>

Third, HTML nobr prohibited content Wrapping code example

Here, if there are 4 lines of article title list, set the width of 200px;css row height of 22px; we use the UL Li List layout for 4 columns, 2 of which add <nobr> tags to the content, one Li content, the other Li content is less than the width can be displayed.

1. Full HTML source code:

12345678910111213141516171819 <!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>nobr标签实例 www.169it.com</title><style>ul{ border:1px solid #000; width:200px;}li{ width:200px; line-height:22px}</style></head><body><ul><li><nobr>第一排内容文字多加nobr标签测试内容</nobr></li><li><nobr>第二排内容文字多加nobr标签不能排下</nobr></li><li>第三排内容文字多没有加nobr标签</li><li>第四排 文字少能排下</li></ul></body></html>

Example code 2:

1234567891011121314 <styletype="text/css">.AutoNewline{  width:300px;  border:1px solid red;}</style><table><tr><tdclass="AutoNewline"><nobr>自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</nobr></td></tr></table>
    • Article Source: Web front-end design: HTML forced non-wrapping <nobr> Tag Usage code example

Web front-end design: HTML forced non-wrapping <nobr> tag Usage code example

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.