CSS 文本控制

Taonce 發布于2019-08-29 15:42 / 2529人閱讀

摘要：學習一些文本控制的屬性，防止做傻事。是的升級版，當單行文本過長，超過文本邊界時自動換行。否則，文本仍然左對齊。

one more time one more chance. 一歩重頭學前端, css入門。

學習一些 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-space

white-space用來設置內容中的空格的處理方式。

white-space：normal | pre | nowrap | pre-wrap | pre-line

white-space: nowrap不換行，空格會被合并: 1. 第一行開始我寫了好多空格在實際效果中被合并成了一個；2. 然后中間又鍵入了回車，但是前端并未換行； 3.
是可以使文本換行的;

white-space: pre保留空格(包括鍵入的回車換行)，單行文本過長時不會自動換行,
在任何情況下都是可以生效的。
See the Pen

pre-wrap是pre 的升級版，當單行文本過長，超過文本邊界時自動換行。請自行演示代碼。pre-line作為自學內容。

text-overflow

用來定義當文本超出容器邊界時如何處理。

/*切斷 | 使用省略號 | 使用自定義的字符串*/
text-overflow: clip|ellipsis|string;

看個極端點的例子：給 div 寬度限定為 width:500px,然后 overflow: hidden 確定該 div 的文本邊界，不能再多了，再然后 white-space: pre 保留空格，但是當文本超出邊界時不會自動換行，這樣每行文本就都超出了邊界，此時我們再嘗試使用 text-overflow 進行溢出限制。

See the Pen

那么現在就可以解釋單行文本溢出時加三個點顯示的代碼了：

white-space: nowrap; /*容器內的文本單行顯示*/
overflow: hidden; /*確定文本邊界，容器的邊界就是文本的界限不可以突出去*/
text-overflow: ellipsis; /*超出的部分使用3個點代替*/

不要忘記思考：多行文本溢出，省略顯示如何實現。

word-break, word-wrap

推薦大家閱讀你真的了解word-wrap和word-break的區別嗎、
word-wrap 和 word-break 問答
斷字規則
每種語言都有各自的默認斷字規則，在哪個位置可以插入break-points(斷點)，當需要換行顯示時，會根據這些斷點來決定從文字的哪個位置開始換行。比如漢字你好嗎的斷點你·好·嗎，中間的點表示斷點的位置；比如英文hello world的斷點hello·world;

那么，我們可能想要改變這些默認的斷點規則，word-break屬性就是做這個的，它會改變默認的斷點規則。當設置word-break: break-all;的時候，上面的漢字斷點規則并沒有改變，英文的斷點除了默認的空白符和符號斷點外，還會在任意兩個字母之間添加斷點，也就是說任意位置是可以斷開的，此時英文hello world的斷點也就變為h·e·l·l·o·w·o·r·l·d;

文字排版會按照斷字規則（瀏覽器規則或自定義規則）進行排版，如果一個很長很長的單詞中間又是不可斷的時候word-wrap就可以上場了，word-wrap 是用來決定允不允許單詞內斷句的，如果不允許的話長單詞就會溢出。word-wrap: break-word它會首先嘗試將整個長單詞挪到下一行，看看下一行的寬度夠不夠，不夠的話還會進行單詞內的斷句。

word-break: normal|break-all|keep-all;word-break的本質是更改斷點規則， normal 正常規則，break-all 到處都可以斷，keep-all只能在半角空格或連字符處換行（試試長中文的句子就明白了）。

See The Pen

word-wrap: normal|break-word;normal，只在允許的斷字點換行基于瀏覽器默認設置或者 word-break 的設置。break-word它會首先嘗試將整個長單詞挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句。

綜上，我自己明白了，可能大家已經被我繞暈了。

white-space word-wrap word-break 三者的關系

white-space、word-wrap、word-break 是不太好理解。沒解釋明白的話，請跳轉連接看看大牛們的文章。

若設置了 white-space 后，word-wrap 和 word-break又如何表現呢？請記住white-space 老大，word-break 老二，word-wrap 第三。如果設置了 white-space: nowrap，后兩者是不起作用的。

See the Pen

text-align: justify 兩端對齊

是不是都用過 text-align: left | right;那么 justify 是干什么的呢？下圖是個常見的需求文字兩端對齊。

筆者曾經使用 來打空格，真是 SB 啊，用這么 low 的方法明顯反應出我既不會 text-align 也不會 white-space。

css的兩端對齊有個坑,最后一行的文字不會兩端對齊，而是左對齊。
推薦大家看看大漠的解釋：在其自然狀態下，"text-align:justify"就不能工作，除非內容足夠長并引起一個換行符。否則，文本仍然左對齊。如果你想知道這是為什么，這是因為在排版中這是理想的行為——一個塊中的最后一行文本總是左對齊。也許這是一個CSS規范設計，即使我們只有一行文本，這一行還是像最后一行一樣，讓文本左對齊

云服務器 GPU云服務器 css文本框控制文本 html控制文本跨行 css引入css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113490.html

CSS基礎知識整理

摘要：語法基礎語法規則由兩個主要部分構成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高...

Edison 2019-08-30 11:09 評論0 收藏0
【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

iOS122 2019-08-30 15:54 評論0 收藏0
css文本模型漫游指南

摘要：默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。常見的內聯元素有分類替換元素在中，可替換元素的展現效果不是由來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于的。前言在寫作本文章前原本打算只是復習一下 line-height 和 vertical-height 這兩個屬性而已, 結果發現掉進了一個大坑網上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...

cncoder 2019-08-02 15:40 評論0 收藏0
css文本模型漫游指南

摘要：默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。常見的內聯元素有分類替換元素在中，可替換元素的展現效果不是由來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于的。前言在寫作本文章前原本打算只是復習一下 line-height 和 vertical-height 這兩個屬性而已, 結果發現掉進了一個大坑網上有很多篇文章看的我云里霧里的, 最后決定還是從頭來一遍吧, ...

Freelander 2019-08-30 15:44 評論0 收藏0