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

最新推荐文章于 2024-05-11 15:19:42 发布

weixin_30918415

最新推荐文章于 2024-05-11 15:19:42 发布

阅读量426

点赞数

文章标签：前端 xhtml ViewUI

原文链接：http://www.cnblogs.com/besty/p/4102698.html

版权

在网页排版布局中比如文章列表标题排版，无论多少文字均不希望换行显示，需要强制在一行显示完内容。这就可以nobr标签来实现。它起到的作用与word-break:keep-all 是一样的。nobr 是 No Break 的缩写，意思是禁止换行。通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行，但是如果文字被包含在～标签里的话，则不会换行。由www.169it.com搜集整理

一、nobr语法

1	`<` `nobr` `>内容</` `nobr` `>`

不换行内容放入与之间即可,此标签与css white-space功能相同。

二、nobr标签特点：

如不遇到br换行标签，内容在一行显示完，如遇到br换行标签，内容将在加br换行自动换行。

作为定义外观的标签，在 W3C 里未被采用。要用样式表来实现禁止换行的效果的话，请在 white-space 里指定 nowrap。nowrap使用示例如下:

 
       < 
       div  
       style 
       = 
       "white-space: nowrap;" 
       > 
      
 
       即使浏览器的横幅不够，这里也不会换行。 
      
 
       </ 
       div 
       > 
      

三、html nobr禁止内容换行代码示例

这里假如有4行文章标题列表，设置宽度为200px；css行高为22px；对4列的内容我们采用ul li列表布局，其中2个对内容加标签，一个li内容不加，另外一个li内容少与宽度能显示完。

1、完整html源代码：

 
       <!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：

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