歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:阿森纳热刺 > HTML >

阿森纳热刺 www.tzxsac.com.cn html <nobr>強制不換行標簽-禁止內容換行html標簽元素介紹篇

在網頁排版布局中比如文章列表標題排版,無論多少文字均不希望換行顯示,需要強制在一行顯示完內容。這就可以nobr標簽來實現。

一、nobr語法   -   TOP

<nobr>內容</nobr>

不換行內容放入<nobr>與</nobr>之間即可。

此標簽與css white-space功能相同。

二、nobr標簽特點:   -   TOP

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

三、html nobr禁止內容換行案例   -   TOP

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

1、完整html源代碼

  1. <!DOCTYPE html> 
  2. <html xmlns="//www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>nobr標簽實例 阿森纳热刺 www.tzxsac.com.cn</title> 
  6. <style> 
  7. ul{ border:1px solid #000; width:200px;} 
  8. li{ width:200px; line-height:22px} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <ul> 
  13. <li><nobr>第一排內容文字多加nobr標簽測試內容</nobr></li> 
  14. <li><nobr>第二排內容文字多加nobr標簽不能排下</nobr></li> 
  15. <li>第三排內容文字多沒有加nobr標簽</li> 
  16. <li>第四排 文字少能排下</li> 
  17. </ul> 
  18. </body> 
  19. </html> 

2、效果截圖

nobr換行用法實例截圖
html nobr禁止換行用法實例截圖

3、案例測試查看案例
這里可能大家發現一個問題,如果強制一行顯示完內容,可能內容就會溢出設置寬度,可選擇解決方法如下:

1)、css省略號替代溢出內容
2)、css隱藏超出DIV內容
3)、css防止圖片撐破div

4、nobr案例打包下載

相關阿森纳热刺教程:
使用nobr標簽實現顯示不完的文字變省略號

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/html/h533.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
阿森纳热刺文章修訂日期:2018-08-14 17:37 原創:阿森纳热刺
本文阿森纳热刺 www.tzxsac.com.cn DIVCSS5版權所有。