其使用場景有很多,比如:橫向滑動,超出顯示省略號,輸出空格顯示空格等
在寫手機頁面的過程中,我想大部分人都遇到橫向滑動的問題,今天我們就來討論一下橫向滑動,其css核心為:white-space、
1.首先定義乙個父容器寬度,
2.設定子元素個數,使其超過父容器寬度
3.父元素設定white-space:nowarp, overflow:hidden或 overflow-y:hidden即可
如下圖
原理:1. 先讓父元素設定超出隱藏,overflow:hidden。2.再設定 white-space 強制不換行。3. text-overflow: ellipsis 超出顯示省略號
簡單之美是透著一種禪意,如天上輕盈的白雲,隨緣自在;如花中純白,清新淡雅;如冬雪初落,純潔通透;如畫中留白,給人以想象。簡單,純粹而通透,天然而不加雕琢。曾遇到過這樣乙個問題: 有乙個textarea標籤和pre標籤,第乙個輸入值為第二個顯示內容
當輸入過長時,會出現如下問題
又檢視 white-space的屬性, 有乙個pre-wrap和pre-line屬性,就正常了
今天總結了 white-space一些常用的情況, 但並非全部, 希望大家有新的案例,可以告知,謝謝!
另外,昨天看了錘子的相聲, 還是一樣的感慨,還是佩服老羅,希望堅果pro 可以大賣
xml空格WhiteSpace處理
xml 將以下四種字元歸為空白字元 whitespace 回車符 r 或 ch 13 換行符 n 或 ch 10 製表符 t 以及空格 在 xml 文件中,空白字元分為兩類 有意義空白字元 是文件內容的一部分,應予以保留。無意義空白字元 在編輯 xml 文件時使用,以增加可讀性。這些空白字元一般在文...
white space 不換行 屬性
在寫文字或者多個元素並列一行的時候,我們希望文字不會因為父框的大小而換行,也不希望同行元素因為瀏覽器大小原因而被擠到第二行。這個時候我們就可以使用到white space屬性樣式。該樣式屬性可以對子元素或者子文字的換行和空格進行處理。值描述 normal 預設。空白會被瀏覽器忽略。pre空白會被瀏覽...
強制不換行屬性 white space
td裡的文字老是會換行,導致 排列的很難看。網上搜了一下,可以通過設定樣式的white space屬性,控制其再不換行啦 white space,英語片語意思為空餘時間,在計算機術語中的意思是泛空格符。white space 屬性設定如何處理元素內的空白。瀏覽器支援 所有瀏覽器都支援 white s...