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
1. nobr syntax
| < nobr >Content nobr >
|
2. Features of the nobr tag:
1 2 3 |
< div style = "white-space: nowrap;" > 即使浏览器的横幅不够,这里也不会换行。 div > |
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.
1
| < div style = "white-space: nowrap;" > Even if the browser banner is not enough, there will be no line wrapping here. div > |
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 title > < style > ul{ border:1px solid #000; width:200px;} li{ width:200px; line-height:22px} style > head > < body > < ul > < li > ; li > < li >< nobr >The second row of content text cannot be placed if the nobr tag is added nobr > li > < li >There is too much text in the third row and no nobr tag is added li > < li >There is too little text in the fourth row to be placed li > ul > body > html > |
3 4 5 6 7 8 9 10 11 12 13 14 | < style type = "text/css" > .AutoNewline { width:300px; border:1px solid red; } style > < table > < tr > < td class = "AutoNewline" >< nobr >自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换 行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自 动换行自动换行自动换行 nobr > td > tr > table > |