文本相關：`text-align`、`text-indent`、`text-decoration`、`text-shadow`、`letter-spacing`、`word-spacing`、`white-space`； * **`text-align:`** `left:` 把文本排列到左邊。默認值：由瀏覽器決定。 `right:` 把文本排列到右邊。 `center:` 把文本排列到中間。 `justify:`實現兩端對齊文本效果。 `inherit:` 規定應該從父元素繼承 text-align 屬性的值。 * **`text-align-last:`** `left:` 將最后一行文本與容器左側對齊。 `right:`將最后一行文本與容器右側對齊。 `center:` 將容器內的最后一行文本居中。 `justify:`對齊文本的最后一行，使其跨越容器的整個寬度，如果需要，在單詞之間插入空格以增加行長。 `start:`將文本與行的`開始`對齊。 `end:`將最后一行與行的`結尾`對齊。 `auto:`默認值。對齊最后一行文本以匹配元素的text-align屬性（如果已設置）。如果未設置，auto則將文本與開頭對齊。 `inherit:`應用text-align-last父元素的屬性。 * **`text-indent :`** `text-indent `屬性指定在元素的文本內容的第一行開始之前應該移動多少水平間距文本。 *間距是從塊級容器元素的起始邊緣計算的。本屬性對行內元素無效。* > 首行縮進兩個字符：text-indent: 2em; >文字隱藏：text-indent: -9999px; * **`text-decoration :`** ~~~ .underline { text-decoration: underline; text-decoration-color: #dd6ff8; } .solid { text-decoration-style: solid; } .dotted { text-decoration-style: dotted; } .dashed { text-decoration-style: dashed; } .wavy { text-decoration-style: wavy; } .overline { text-decoration-line: overline; text-decoration-color: #dd6ff8; } .underline-overline { text-decoration-line: underline overline; text-decoration-color: #dd6ff8; } .line-through { text-decoration: line-through; text-decoration-color: #dd6ff8; } .thickness { display: flex; justify-content: center; } .thin { text-decoration-thickness: 1.5px; } .normal { text-decoration-thickness: 2.5px; } .thick { text-decoration-thickness: 6px; } .underline-offset { justify-content: center; display: flex; } .double { text-decoration-style: double; } .offset { text-underline-offset: 4px; } .wavy.offset{ text-underline-offset: 8px; } ~~~ * **`text-shadow：`** > 1.text-shadow:水平位置 垂直位置 模糊距離 陰影顏色; > 2.前兩項是必須寫的。 后兩項可以選寫。 <hr> **超出部分顯示省略號** * 單行 ~~~ overflow: hidden; /*超出部分隱藏*/ text-overflow: ellipsis; /*超出部分顯示省略號*/ white-space: nowrap;/*規定段落中的文本不進行換行 */ ~~~ * 多行 ~~~ overflow: hidden; display: -webkit-box;/*將對象作為彈性伸縮盒子模型顯示 ?*必須結合的屬性* */ -webkit-box-orient: vertical;/*設置伸縮盒對象的子元素的排列方式 ?*必須結合的屬性* */ -webkit-line-clamp: 3;/*用來限制在一個塊元素中顯示的文本的行數*/ word-break: break-all;/*讓瀏覽器實現在任意位置的換行 *break-all為允許在單詞內換行* */ ~~~ **換行** ~~~ /*不換行*/ white-space:nowrap; /*自動換行*/ word-wrap: break-word; word-break: normal; /*強制換行*/ word-break:break-all; ~~~ **兩端對齊** ~~~ text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ text-align-last: justify;/*一個塊或行的最后一行對齊方式*/ -moz-text-align-last: justify; -webkit-text-align-last: justify; ~~~ **文字豎向排版** ~~~ /*單列展示*/ width: 25px; line-height: 18px; height: auto; font-size: 12px; padding: 8px 5px; word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/ /*多列展示*/ height: 210px; line-height: 30px; text-align: justify; writing-mode: vertical-lr;/*從左向右*/ writing-mode: tb-lr;/*IE從左向右* /*writing-mode: vertical-rl; ?-- 從右向左*/ /*writing-mode: tb-rl; ? ? ? ?-- 從右向左*/ ~~~ **禁止用戶選擇** ~~~ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; ~~~ **隱藏文字** ~~~ font: 0/0 a; color: transparent; text-indent: -9999px; ~~~ **文字少時居中，多時靠左** ~~~ .box { text-align: center; } .content { display: inline-block; text-align: left; word-break: break-all; } ~~~ **名稱為純英文數字等不換行問題** ~~~ element{word-wrap:break-word;word-break:break-all;} ~~~ **vertical-align** > 生效條件:只能應用在`display`為`inline`、`inline-block`、`inline-table`、`table-cell`上。