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

時間 2019-12-14

標籤 web 前端設計 html 強制換行標籤用法代碼示例欄目 HTML 简体版

原文原文鏈接

在網頁排版佈局中好比文章列表標題排版，不管多少文字均不但願換行顯示，須要強制在一行顯示完內容。這就能夠nobr標籤來實現。它起到的做用與word-break:keep-all 是同樣的。nobr 是 No Break 的縮寫，意思是禁止換行。一般在瀏覽器上顯示的文檔會在到達瀏覽器的橫幅底端時自動換行，可是若是文字被包含在～標籤裏的話，則不會換行。由www.169it.com蒐集整理css

1、nobr語法html

1	`<` `nobr` `>內容</` `nobr` `>`

不換行內容放入與之間便可,此標籤與css white-space功能相同。前端

2、nobr標籤特色：瀏覽器

如不遇到br換行標籤，內容在一行顯示完，如遇到br換行標籤，內容將在加br換行自動換行。佈局

做爲定義外觀的標籤，在 W3C 裏未被採用。要用樣式表來實現禁止換行的效果的話，請在 white-space 裏指定 nowrap。nowrap使用示例以下:測試

 
      < 
      div  
      style 
      = 
      "white-space: nowrap;" 
      > 
     
 
      即便瀏覽器的橫幅不夠，這裏也不會換行。 
     
 
      </ 
      div 
      > 
     

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

這裏假若有4行文章標題列表，設置寬度爲200px；css行高爲22px；對4列的內容咱們採用ul li列表佈局，其中2個對內容加標籤，一個li內容不加，另一個li內容少與寬度能顯示完。spa

一、完整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：code

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