Web Front-end design: Html forced line breaks & lt; nobr & gt; tag usage code example, webnobr

Source: Internet
Author: User

Web Front-end design: Html forced not to wrap <nobr> tag usage code example, webnobr

In the layout of a webpage, for example, the title layout of the article list, no line breaks are expected to be displayed regardless of the number of texts, and the content must be forcibly displayed on a line. This can be achieved using the nobr tag. It serves the same purpose as word-break: keep-all. Nobr is the abbreviation of No Break, meaning that line breaks are prohibited. Normally, documents displayed in the browser will automatically wrap when they reach the bottom of the browser's banner, but if the text is included in <nobr> ~ </Nobr> if it is in the tag, the line feed is not displayed. Collected by www.169it.com

1. nobr syntax

1 <nobr> Content </nobr>

Place the content without line breaks between <nobr> and </nobr>. This label has the same function as css white-space.

Ii. nobr tag features:

If you do not encounter a br line feed label, the content will be displayed in one line. If you encounter a br line feed label, the content will be automatically wrapped in a br line feed.

<Nobr> labels used to define the appearance are not used in W3C. If you want to use a style sheet to disable line breaks, specify nowrap in white-space. Nowrap example:

123 <div style="white-space: nowrap;">Even if the browser's banners are not enough, there will be no line breaks here.</div>

Iii. Example of html nobr prohibiting line feed code

For example, if there are four lines of the Article Title List, set the width to 200px; the css Row Height to 22px; for the four columns of content, we use ul li list layout, two of them add <nobr> labels to internal content, one li content is not added, and the other li content is less and the width can be displayed completely.

1. Complete html source code:

12345678910111213141516171819 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> Nobr tag instance www.169it.com </title><style>ul{ border:1px solid #000; width:200px;}li{ width:200px; line-height:22px}</style></head><body><ul><li><nobr> Add the nobr tag test content to the first row of content text </nobr></li><li><nobr> The nobr label cannot be added to the text in the second row. </nobr></li><li> NO nobr label is added to the third row of text. </li><li> The fourth row of text is rarely exclusive </li></ul></body></html>

Sample Code 2:

1234567891011121314 <style type="text/css">.AutoNewline{  width:300px;  border:1px solid red;}</style><table><tr><td class="AutoNewline"><nobr> Automatic newlineAutomatic newline, automatic newline, automatic newlineDynamic line feed automatic line feed </nobr></td></tr></table>
  • Source: Web Front-end design: Html forced line breaks <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.