Web front-end design: Html forces no line breaks <nobr> tag usage code example_html/css

Web front-end design: Html forces no line breaks tag usage code example_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:54:04

Original

2163 people have browsed it

In web page layout, such as article list title layout, no matter how many words there are, you do not want them to be displayed in new lines. You need to force the content to be displayed on one line. This can be achieved with the nobr tag. It plays the same role as word-break:keep-all. nobr is the abbreviation of No Break, which means line breaks are prohibited. Normally documents displayed in a browser will automatically wrap when reaching the bottom of the browser's banner, but if the text is contained in ~ tags, it will not wrap. Collected and organized by www.169it.com

1. nobr syntax

1	< nobr >内容

< nobr >Content

The content without line breaks is placed between and That’s it, this tag has the same function as css white-space.

2. Features of the nobr tag:

< div style = "white-space: nowrap;" >

即使浏览器的横幅不够，这里也不会换行。

If the br line break tag is not encountered, the content will be displayed on one line. If the br line break tag is encountered, the content will automatically wrap after the br line break tag is encountered.

As a tag that defines appearance, it is not adopted in the W3C. If you want to use a style sheet to prevent line breaks, please specify nowrap in white-space. Examples of nowrap usage are as follows:

< 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

< style >

ul{ border:1px solid #000; width:200px;}

li{ width:200px; line-height:22px}

< body >

< ul >

< li >< nobr >第一排内容文字多加nobr标签测试内容

< li >< nobr >第二排内容文字多加nobr标签不能排下

< li >第三排内容文字多没有加nobr标签

< li >第四排文字少能排下

2 3

< div style = "white-space: nowrap;" > Even if the browser banner is not enough, there will be no line wrapping here.

3. Code example of html nobr prohibiting content wrapping If here There are 4 lines of article title lists, set the width to 200px; the css line height is 22px; we use the ul li list layout for the content of the 4 columns, 2 of which add the tag to the content, one does not add the li content, and the other The content of li is small and the width can be displayed completely. 1. Complete html source code: table>

示例代码2：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< html xmlns = "http://www.w3.org/1999 /xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >nobr tag example www.169it.com < style > ul{ border:1px solid #000; width:200px;} li{ width:200px; line-height:22px} < body > < ul > < li > ; < li >< nobr >The second row of content text cannot be placed if the nobr tag is added < li >There is too much text in the third row and no nobr tag is added < li >There is too little text in the fourth row to be placed

< style type = "text/css" >

.AutoNewline

{

width:300px;

border:1px solid red;

}

< table >

< tr >

< td class = "AutoNewline" >< nobr >自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换

行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自

动换行自动换行自动换行

10 11 12 13 14

< style type = "text/css" > .AutoNewline { width:300px; border:1px solid red; } < table > < tr > < td class = "AutoNewline" >< nobr >自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行

文章来源:Web前端设计:Html强制不换行标签用法代码示例