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 >日常我們為了讓文字內容在一行內顯示完,哪怕寬度不夠也不能換行,我們可以使用white-space樣式,但如果遇到了html br強制換行標簽,無論是設置white-space與否都會被 br 強制換行。
介紹了這么久的white-space,相信你一定已經有所了解,有需要的朋友可以保存一下,更多精彩請大家持續關注本站的其他更新。
相關閱讀:
html中的label標簽使用方法
DIV背景圖片background的設置方法
HTML標題標簽元素怎么修改
以上就是HTML里white-space怎么使用的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答