歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:最笨重的动物 > HTML >

最笨重的动物 www.yyhul.icu 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.yyhul.icu</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.yyhul.icu/html/h533.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
最笨重的动物文章修訂日期:2018-08-14 17:37 原創:最笨重的动物
本文最笨重的动物 www.yyhul.icu DIVCSS5版權所有。

大乐透小助手下载安装 三公技巧出九点规律 福建时时开奖时间 胆拖投注中奖计算器360 老时时彩开奖走势图 快三顺龙技巧 河北时时11选五开奖结果查询 牛牛稳赢公式 pk10最牛稳赚3码计划 后三组选包胆什么意思 买北京pk10技巧 贝斯特全球最奢游戏手机app 足球设胆是什么意思 腾讯二人麻将雀神 pk10计划软件免费下载 时时彩开奖号码