首頁 > web前端 > html教學 > HTML裡white-space怎麼使用

HTML裡white-space怎麼使用

php中世界最好的语言
發布: 2017-11-22 15:17:51
原創
4824 人瀏覽過

white-space是HTML一個標籤,那麼今天我們給大家科普一下,這個屬性究竟怎麼使用,可以在哪些情境下使用

white-space norma nowrap強制同一行內顯示所有文字文字,讓所有文字內容中一排顯示不換行。

讓文字不自動換行,無論CSS寬度設定多少,所有文字都在一行內顯示。特別是標題列表,我們想一行只顯示一條標題內容,而有時寬度有限標題文字多了width(寬度)又有限,這樣會造成文字自動換行,這個時候我們可以使用white-space樣式讓他一排顯示不換行,當然我們為了隱藏超出的文字內容我們可以再加一個css overflow:hidden樣式。

white-space語法:

##white-space : normal nowrap 

white-space參數:

normal :  預設處理方式

nowrap :  強制在同一行內顯示所有文本,直到文本結束或遭遇br標籤物件才換行。建議使用white-space:nowrap強制不換行。

white-space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容

通常我們使用white-space:nowrap強製文字文字內容不換行,在物件內一行顯示完所有文字內容。

我設定2個物件盒子,一個設定強制同行顯示文字內容。第二個設定強制同行顯示,但使用html br標籤觀察效果。為了white-space案例應用效果,我設定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">内容将在一行内强制显示完整</div> 
<div class="div">内容使用br换行<br /> 
将会不被<br />换行显示</div>
登入後複製

日常我們為了讓文字內容在一行內顯示完,即使寬度不夠也不能換行,我們可以使用white-space樣式,但如果遇到了html br強制換行標籤,無論是設定white-space與否都會被
強制換行。

介紹了這麼久的white-space,相信你一定已經有所了解,有需要的朋友可以保存一下,更多精彩請大家持續關注本站的其他更新。

相關閱讀:

html中的label標籤使用方法


DIV背景圖片background的設定方法


HTML標題標籤元素怎麼修改

以上是HTML裡white-space怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板