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
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 |
< div style = "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>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-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 |
<
style
type
=
"text/css"
>
.AutoNewline
{
width:300px;
border:1px solid red;
}
</
style
>
<
table
>
<
tr
>
<
td
class
=
"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