摘要:學(xué)習(xí)一些文本控制的屬性,防止做傻事。是的升級版,當(dāng)單行文本過長,超過文本邊界時自動換行。否則,文本仍然左對齊。
one more time one more chance. 一歩重頭學(xué)前端, css入門。
學(xué)習(xí)一些 CSS 文本控制的屬性,防止做傻事。請大家對照下面列表檢驗下: 會的、不會的、似懂非懂的。筆者是一個也不會。
white-space
text-overflow: ellipsis;
word-break, word-wrap
text-align: justify
text-decoration
text-transform
text-indent
letter-spacing
word-spacing
文本溢出顯示(...).truncate { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
這個簡單的 css語句,使用的比較多了吧,那么請解釋下 white-space 和 text-overflow,我尼瑪,并不會是不是。
white-spacewhite-space用來設(shè)置內(nèi)容中的空格的處理方式。
white-space:normal | pre | nowrap | pre-wrap | pre-line
white-space: nowrap不換行,空格會被合并: 1. 第一行開始我寫了好多空格在實際效果中被合并成了一個;2. 然后中間又鍵入了回車,但是前端并未換行; 3.
是可以使文本換行的;
white-space: pre保留空格(包括鍵入的回車換行),單行文本過長時不會自動換行,
在任何情況下都是可以生效的。
See the Pen
pre-wrap是pre 的升級版,當(dāng)單行文本過長,超過文本邊界時自動換行。請自行演示代碼。pre-line作為自學(xué)內(nèi)容。
text-overflow用來定義當(dāng)文本超出容器邊界時如何處理。
/*切斷 | 使用省略號 | 使用自定義的字符串*/ text-overflow: clip|ellipsis|string;
看個極端點的例子: 給 div 寬度限定為 width:500px,然后 overflow: hidden 確定該 div 的 文本邊界,不能再多了,再然后 white-space: pre 保留空格,但是當(dāng)文本超出邊界時不會自動換行,這樣每行文本就都超出了邊界,此時我們再嘗試使用 text-overflow 進(jìn)行溢出限制。
See the Pen
那么現(xiàn)在就可以解釋單行文本溢出時加三個點顯示的代碼了:
white-space: nowrap; /*容器內(nèi)的文本單行顯示*/ overflow: hidden; /*確定文本邊界,容器的邊界就是文本的界限不可以突出去*/ text-overflow: ellipsis; /*超出的部分使用3個點代替*/
不要忘記思考: 多行文本溢出,省略顯示如何實現(xiàn)。
word-break, word-wrap推薦大家閱讀你真的了解word-wrap和word-break的區(qū)別嗎、
word-wrap 和 word-break 問答
斷字規(guī)則
每種語言都有各自的默認(rèn)斷字規(guī)則,在哪個位置可以插入break-points(斷點),當(dāng)需要換行顯示時,會根據(jù)這些斷點來決定從文字的哪個位置開始換行。 比如漢字你好嗎的斷點你·好·嗎,中間的點表示斷點的位置; 比如英文hello world的斷點hello·world;
那么,我們可能想要改變這些默認(rèn)的斷點規(guī)則,word-break屬性就是做這個的,它會改變默認(rèn)的斷點規(guī)則。當(dāng)設(shè)置word-break: break-all;的時候,上面的漢字?jǐn)帱c規(guī)則并沒有改變,英文的斷點除了默認(rèn)的空白符和符號斷點外,還會在任意兩個字母之間添加斷點,也就是說任意位置是可以斷開的,此時英文hello world的斷點也就變?yōu)?b>h·e·l·l·o·w·o·r·l·d;
文字排版會按照斷字規(guī)則(瀏覽器規(guī)則或自定義規(guī)則)進(jìn)行排版,如果一個很長很長的單詞中間又是不可斷的時候word-wrap就可以上場了,word-wrap 是用來決定允不允許單詞內(nèi)斷句的,如果不允許的話長單詞就會溢出。word-wrap: break-word它會首先嘗試將整個長單詞挪到下一行,看看下一行的寬度夠不夠,不夠的話還會進(jìn)行單詞內(nèi)的斷句。
word-break: normal|break-all|keep-all;word-break的本質(zhì)是更改斷點規(guī)則, normal 正常規(guī)則,break-all 到處都可以斷,keep-all只能在半角空格或連字符處換行(試試長中文的句子就明白了)。
See The Pen
word-wrap: normal|break-word;normal,只在允許的斷字點換行基于瀏覽器默認(rèn)設(shè)置或者 word-break 的設(shè)置。break-word它會首先嘗試將整個長單詞挪到下一行,看看下一行的寬度夠不夠,不夠的話就進(jìn)行單詞內(nèi)的斷句。
綜上,我自己明白了,可能大家已經(jīng)被我繞暈了。
white-space word-wrap word-break 三者的關(guān)系white-space、word-wrap、word-break 是不太好理解。沒解釋明白的話,請?zhí)D(zhuǎn)連接看看大牛們的文章。
若設(shè)置了 white-space 后,word-wrap 和 word-break又如何表現(xiàn)呢? 請記住white-space 老大,word-break 老二,word-wrap 第三。如果設(shè)置了 white-space: nowrap,后兩者是不起作用的。
See the Pen
text-align: justify 兩端對齊是不是都用過 text-align: left | right;那么 justify 是干什么的呢?下圖是個常見的需求文字兩端對齊。
筆者曾經(jīng)使用 來打空格,真是 SB 啊,用這么 low 的方法明顯反應(yīng)出我既不會 text-align 也不會 white-space。
css的兩端對齊有個坑,最后一行的文字不會兩端對齊,而是左對齊。
推薦大家看看大漠的解釋: 在其自然狀態(tài)下,"text-align:justify"就不能工作,除非內(nèi)容足夠長并引起一個換行符。否則,文本仍然左對齊。如果你想知道這是為什么,這是因為在排版中這是理想的行為——一個塊中的最后一行文本總是左對齊。也許這是一個CSS規(guī)范設(shè)計,即使我們只有一行文本,這一行還是像最后一行一樣,讓文本左對齊
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/113490.html
摘要:語法基礎(chǔ)語法規(guī)則由兩個主要部分構(gòu)成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式,也叫做類選擇器。后代選則器又稱為包含選擇器,以空格分隔,子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS? CSS通常稱為CSS樣式表或?qū)盈B樣式表(級聯(lián)樣式表),主要用于設(shè)置HTML頁面中的文本內(nèi)容(字體、大小、對齊方式等)、圖片的外形(寬高...
摘要:為了實現(xiàn)文字環(huán)繞效果,規(guī)范規(guī)定的措施是使父容器塌陷,元素脫離文檔流浮動產(chǎn)生,元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點 A + B - 下一個兄弟節(jié)點 A...
摘要:默認(rèn)情況下,行內(nèi)元素不會以新行開始,而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中,可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨立于的。 前言 在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進(jìn)了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...
摘要:默認(rèn)情況下,行內(nèi)元素不會以新行開始,而塊級元素會新起一行。常見的內(nèi)聯(lián)元素有分類替換元素在中,可替換元素的展現(xiàn)效果不是由來控制的。這些元素是一種外部對象,它們外觀的渲染,是獨立于的。 前言 在寫作本文章前原本打算只是復(fù)習(xí)一下 line-height 和 vertical-height 這兩個屬性而已, 結(jié)果發(fā)現(xiàn)掉進(jìn)了一個大坑網(wǎng)上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...
閱讀 3933·2021-09-09 09:33
閱讀 1796·2021-09-06 15:14
閱讀 1936·2019-08-30 15:44
閱讀 3089·2019-08-29 18:36
閱讀 3776·2019-08-29 16:22
閱讀 2104·2019-08-29 16:21
閱讀 2543·2019-08-29 15:42
閱讀 1658·2019-08-29 11:00