HTML里white-space怎么使用

white-space norma nowrap強(qiáng)制同一行內(nèi)顯示所有文本文字，讓所有文字內(nèi)容中一排顯示不換行。

讓文字不自動(dòng)換行，無(wú)論CSS寬度設(shè)置多少，所有文字都在一行內(nèi)顯示。特別是標(biāo)題列表，我們想一行只顯示一條標(biāo)題內(nèi)容，而有時(shí)寬度有限標(biāo)題文字多了width(寬度)又有限，這樣會(huì)造成文字自動(dòng)換行，這個(gè)時(shí)候我們可以使用white-space樣式讓他一排顯示不換行，當(dāng)然我們?yōu)榱穗[藏超出的文字內(nèi)容我們可以再加一個(gè)css overflow:hidden樣式。

white-space語(yǔ)法：

white-space : normal nowrap

white-space參數(shù)：

normal : 　默認(rèn)處理方式

nowrap : 　強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對(duì)象才換行。推薦使用white-space:nowrap強(qiáng)制不換行。

white-space設(shè)置或檢索對(duì)象內(nèi)文本顯示方式。通常我們使用于強(qiáng)制一行顯示內(nèi)容

通常我們使用white-space:nowrap強(qiáng)制文本文字內(nèi)容不換行，在對(duì)象內(nèi)一行顯示完所有文字內(nèi)容。

我設(shè)置2個(gè)對(duì)象盒子，一個(gè)設(shè)置強(qiáng)制同行顯示文本內(nèi)容。第二個(gè)設(shè)置強(qiáng)制同行顯示，但使用html br標(biāo)簽觀察效果。為了white-space案例應(yīng)用效果，我設(shè)置css寬度一定120px，css高度為60px,css行高 line-height為20px 。

css代碼

<style> 
div{ width:120px; height:60px; line-height:20px} 
.div{ white-space:nowrap} 
</style>

2、html代碼片段

<div class="div">內(nèi)容將在一行內(nèi)強(qiáng)制顯示完整</div> 
<div class="div">內(nèi)容使用br換行<br /> 
將會(huì)不被<br />換行顯示</div>

日常我們?yōu)榱俗屛淖謨?nèi)容在一行內(nèi)顯示完，哪怕寬度不夠也不能換行，我們可以使用white-space樣式，但如果遇到了html br強(qiáng)制換行標(biāo)簽，無(wú)論是設(shè)置white-space與否都會(huì)被<br>強(qiáng)制換行。

介紹了這么久的white-space，相信你一定已經(jīng)有所了解，有需要的朋友可以保存一下，更多精彩請(qǐng)大家持續(xù)關(guān)注本站的其他更新。

相關(guān)閱讀：

html中的label標(biāo)簽使用方法

DIV背景圖片background的設(shè)置方法

HTML標(biāo)題標(biāo)簽元素怎么修改

以上就是HTML里white-space怎么使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！