Web前端設計:Html強制不換行 標簽用法代碼示例


在網頁排版布局中比如文章列表標題排版,無論多少文字均不希望換行顯示,需要強制在一行顯示完內容。這就可以nobr標簽來實現。它起到的作用與word-break:keep-all 是一樣的。nobr 是 No Break 的縮寫,意思是禁止換行。通常在瀏覽器上顯示的文檔會在到達瀏覽器的橫幅底端時自動換行,但是如果文字被包含在<nobr>~</nobr>標簽里的話,則不會換行。由www.169it.com搜集整理

一、nobr語法

1
< nobr >內容</ nobr >

不換行內容放入<nobr>與</nobr>之間即可,此標簽與css white-space功能相同。

二、nobr標簽特點:

如不遇到br換行標簽,內容在一行顯示完,如遇到br換行標簽,內容將在加br換行自動換行。

<nobr> 作為定義外觀的標簽,在 W3C 里未被采用。要用樣式表來實現禁止換行的效果的話,請在 white-space 里指定 nowrap。nowrap使用示例如下:

1
2
3
< div  style = "white-space: nowrap;" >
即使瀏覽器的橫幅不夠,這里也不會換行。
</ div >

三、html nobr禁止內容換行代碼示例

這里假如有4行文章標題列表,設置寬度為200px;css行高為22px;對4列的內容我們采用ul li列表布局,其中2個對內容加<nobr>標簽,一個li內容不加,另外一個li內容少與寬度能顯示完。

1、完整html源代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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 >

示例代碼2:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM