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