技術文章 » 詳解CSS 文字屬性（Text）

詳解CSS 文字屬性（Text）

2022-08-03 18:03:53
CSS Text（文字）屬性用於定義文字的外觀，比如文字的顏色，對齊文字，裝飾文字，文字顏色，行間距等。本篇文章帶大家瞭解一下CSS 文字屬性（Text），希望對大家有所幫助！

CSS 文字屬性（Text）

用於屬性名CSS 版本瀏覽器支援繼承性預設值
① 顏色的前景色 (文字/文字裝飾/邊框/當前顏色的 顏色) 。color1都支援。IE 所有版本 不支援屬性值「inherit」。yesnot specified
② 文字的書寫方向。文字/表列/水平溢位的 方向 (文字方向 可用標籤的 dir 屬性 替代)。direction2同上。yesltr
③ 標點字元 是否位於線框之外。屬性: 懸掛標點的 位置和符號 (實驗中 屬性)。hanging-punctuation3safari 10.1+支援，其他 都不支援。yesnone
④ 字元間距 (字元之間的 額外空白/空間)。letter-spacing1同上。yesnormal
行高。設定 行高/行間距 (一行多高,影響 行之間的 距離) 。line-height1同上。yesnormal
⑤ 標點字元 修剪。punctuation-trim3都不支援。yesnone
⑥ 文字 水平對齊 方式。text-align1都支援。IE 所有版本yes如果 direction 屬性是 ltr，則預設值是 left；如果 direction 是 rtl，則為 right。 不支援屬性值「inherit」。
⑦ 文字最後一行 水平對齊方式 (搭配 direction,text-align 屬性)。text-align-last3IE11+,edge14+部分支援，FF52+ chrome49+ opera45+支援，safari不支援。yesauto
⑧ 文字 裝飾(線)。text-decoration1同上，且IE、Chrome 或 Safari 不支援 「blink」 屬性值。nonone.(塊元素 首行) 文字的 縮排量 (空白長度)。
⑨ 新增 文字強調符號(形狀,顏色,位置) 。text-emphasis3IE，Edge 不支援，FF52+ safari10.1+ 支援，chrome49+部分支援。nonone
⑩ 文字兩端對齊的 空間分隔方式 (搭配text-align屬性)。text-justify3IE11+，edge14+部分支援，FF55+支援，其他不支援。yesauto
⑪ 文字的陰影 (影響 裝飾線 text-decoration)。text-shadow2都支援。IE 10及以上才支援。yesnone
文字 大小寫轉換。text-transform1都支援。IE 所有版本 不支援屬性值「inherit」。yesnone
⑫ 文字的輪廓。text-outline3都不支援。yesnone
⑬ 隱藏文字溢位時 的顯示 (搭配 overflow,white-space,display 屬性)。text-overflow3都支援，不需要字首。noclip
⑭ 文字新增陰影。text-shadow3都支援，IE10+支援yesnone
⑮ 文字的換行規則。text-wrap3都不支援。yesnormal
⑯ 雙向文字的 重寫/覆蓋 (搭配 direction屬性)。unicode-bidi2
yes
⑰ 空白和換行的 處理。white-space1都支援。IE 所有版本 不支援屬性值「inherit」。yesnormal
⑱ 單詞 換行/斷行 位置 (能否 詞內斷行)。word-break3都支援。IE6+支援。yesnormal
⑲ 對長的不可分割的單詞 進行分割並換行到下一行。單詞 斷行時的 斷行位置 (斷句/斷行 方式)。word-wrap3都支援，IE6+yesnormal
⑳ 單詞/字 之間的 距離。word-spacing1同上yesnormal

1. color 屬性: 顏色的前景色 (文字/文字裝飾/邊框/當前顏色的 顏色)

  • ⑴ 文字 和 邊框 的 顏色
    • 設定 該元素的 文字和邊框的顏色。【推薦學習：】
      • color 屬性
        • 文字/邊框 顏色 屬性
    • 元素的 前景色:
      • color設定 元素的 ❶ 文字 和 ❷ 文字裝飾 (text-decoration) 的 前景顏色值
      • 並設定 當前顏色 ❸ currentcolor的值。
        • 間接值: currentcolor 可以用作 其他屬性的 間接值，並且是 其他顏色屬性(如 ❹ 邊框顏色 border-color)的 預設值。
    • 顏色color屬性設定了 一個 元素的前景色
      • = 文字的顏色: 在 HTML 中，顯示的 就是元素 文字的顏色 和 顏色邊框的顏色.
      • color:green,會 把邊框和文字的顏色,同時設定為 綠色.
      • 邊框的顏色 : 可以用border-color 覆蓋/ 重新設定.
      • 在這裡插入圖片描述
  • ⑵ 光柵影象
    • 不受 前景色color 影響
    • 光柵圖
      • = 點陣圖(.jpg)、點陣圖、畫素圖，簡單的說，
      • = 畫素構成的圖: 最小單位 由畫素構成的 圖
        • 縮放失真: 只有 點的資訊，縮放時 會失真
        • 每個畫素 有自己的顏色，類似 電腦裡的圖片 都是畫素圖
          • 色塊: 把圖 放很大就會看到 點變成 小色塊了
  • ⑶ 前景色 和 背景色
    • ① 背景色
      • 就是你要做的 圖片的底色
      • 預設白色
    • ② 前景色
      • 當前 構圖，線條、填充等 顏色。
    • 背景色就是 紙張的顏色，前景色就是 畫筆畫出的顏色。
  • ⑷ 前景色屬性的 語法
    • color: color_name|hex_number|rgb_number|inherit;
/* 關鍵字值 Keyword values */
color: currentcolor;

/* 顏色名稱 <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* 十六進位制顏色 <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> values ,逗號 可以換成空格,但是目前 最好別這麼做,相容性還沒那麼好*/
color: rgb(34, 12, 64);

/*rgb()中帶不透明度值,瀏覽器支援度不好,用rgba()*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);

color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> values ,逗號 可以換成空格,但是目前 最好別這麼做,相容性還沒那麼好*/
color: hsl(30, 100%, 50%);
/*hsl()中帶 不透明度值,瀏覽器支援度不好,用 hsla()*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);

color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Global values */
color: inherit;
color: initial;
color: unset;
  • ⑸ 前景色color的 屬性值
    • 關鍵點：顏色名稱 十六進位制 rgb程式碼 繼承
      • ① 關鍵字(顏色名稱): color_name,currentColor,transparent
        • 顏色值 為 顏色名稱的顏色
        • （比如red）。
      • ② 十六進位制: hex_number
        • 顏色值 為十六進位制值的 顏色
        • （比如 #ff0000）
      • ③ rgb 程式碼: rgb(),rgba()
        • 顏色值為 rgb 程式碼的顏色
          • color: rgb(34, 12, 64);
          • color: rgba(34, 12, 64, 0.6);
      • ④ hsl 程式碼: hsl(),hsla()
        • color: hsl(30, 100%, 50%);
        • color: hsla(30, 100%, 50%, 0.6);
      • ⑤ 繼承: inherit
        • 從父元素 繼承顏色。
      • 注意: 值必須是 統一的顏色color。
      • 它 不能是 一個漸變色的值<gradient>，漸變色 實際上是一種 影象了,而不是一種顏色.。
  • ⑹ 文字顏色的 預設值
    • 取決於 瀏覽器
  • ⑺ 文字顏色 預設繼承性
    • 被繼承
    • yes

在這裡插入圖片描述

在這裡插入圖片描述

  • 範例1: 把一段文字 設定成紅色的 方法
color {
    width: 600px;
    border: 10px dashed;
    padding: 10px;
    /*把一段文字 設定成紅色的 方法*/
    color: red;
    color: #f00;
    color: #ff0000;
    color: rgb(255,0,0);
    color: rgb(100%,0%,0%);
    color: hsl(0,100%,50%);

    /*設定 半透明的紅色 = 不透明值 等於一半的 紅色*/
    color: #ff000080;
    color: rgba(255,0,0,0.5);
    color: hsla(0,100%,50%,0.5);
}
紅色半透明的紅色
紅色半透明的紅色

2. direction 屬性: 文字/表列/水平溢位的 方向 (文字方向 可用標籤的 dir 屬性 替代)

  • ⑴ 文字/表列/水平溢位的 方向
    • direction屬性 設定 文字、表列(table columns) 和 水平溢位 (horizontal overflow)的 方向。
      • 文字流向: 該屬性設定 塊級元素的基本 文字方向
        • (從左 流向右邊,還是從右 流向左邊,不改變 相鄰文字之間的先後順序,句號除外.)
      • 嵌入方向: 由 unicode-bidi 屬性 建立的 嵌入方向。
      • 文字/塊元素 預設對齊: 設定 文字/塊級元素 的預設對齊方式
      • 單元格 流動方向: 單元格(表列) 在錶行中 流動的方向。
  • ⑵ 方向屬性的 語法
    • direction: ltr|rtl|inherit;
/* 關鍵字值 Keyword values */
direction: ltr;
direction: rtl;

/* 全域性通用的屬性值 Global values */
direction: inherit;
direction: initial;
direction: unset;
  • ⑶ direction方向的 屬性值
    • 文字方向 關鍵點：從左到右流動 從右到左 繼承
    • ① 從左到右(預設值): ltr
      • 內容 從左向右流動
      • 用於 從左到右書寫的語言 (英語,漢語 和 大多數的其他語言)。
      • 文字先後順序 不變:
        • 注意,改變的是 文字的流向,文字之間的前後順序,是不會變化的.
    • ② 從右到左: rtl
      • 內容 從右向左流動。
      • 用於 從右向左 書寫的語言(如 希伯來語(Hebrew) 或 阿拉伯語(Arabic) 等)
        • 不是 所有國家的文字,都是 從左到右的寫的,就跟 中國的古文,從上往下寫的一樣,有的國家的文字方向,是從右到左寫的)
    • ③ 繼承父親: inherit
      • 從父元素 繼承 direction 屬性的值。
      • 內容流動 從父元素繼承。
  • ⑷ CSS 的direction屬性 和 html 標籤的屬性dir(標籤中)
    • ① 文字方向 用標籤的 dir 屬性 :
      • 通常是在 檔案中定義的 (例如，使用 HTML 標籤的dir屬性)，而不是 直接使用direction屬性。
    • ② 單元格 不從表列 繼承direction屬性:
      • 與 HTML中 的 dir 屬性 不同，direction 屬性 不是從表列 繼承到表單元格的，因為CSS 繼承遵循 檔案樹，而 表單元格 位於行中，而 不是列中。
    • ③ 搭配使用:
      • 要使direction屬性 對 行內元素 有影響，必須 unicode-bidi 屬性的值 設定為 embed, override.
    • ④ 不受 all 屬性影響:
      • direction 和 unicode-bidi 屬性: 是唯獨的兩個 不受 all 屬性 影響的屬性。

  • ⑸ direction的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 把一段漢字,設定成相反的 從右到左的 方向.
.color {
    width: 450px;
    border: 10px dashed;
    padding: 10px;
    
    /*設定文字的方向*/
    direction: rtl;
}
預設的文字方向: ltr 從左到右設定成 從右到左 direction: rtl;
  • 從最後一行的 句號。的位置,可以看出
    • ① 文字的流向: 變成了 從左到右,變成了 從右到左排列
    • ② 文字之間的 前後順序: 並沒有改變
      • (因為那些 文字從右到左排列的語言,文字之間的順序,也是不會變的,只是漢語 預設是左到右 書寫順序,所以反流向後 看上去 有點怪)
  • direction: rtl; ＝ <p dir="rtl"> </p>: 兩個效果 是一樣的,dir: direction 的簡寫.
  • 範例2: 改變 表格中 列的排列順序
  • css
.dirTest {
    border: 1px solid;
    width: 300px;
    direction: rtl;
    background-color: #d0d0d0;
}
.dirTest td, th {
    border: 1px solid;
}
  • html
    	<table class="dirTest">
    	    <tr>
    	        <th>①姓名</th>
    	        <th>②愛吃的水果名</th>
    	        <th>③愛好</th>
    	    </tr>
    	    <tr>
    	        <td>

    	            小明
    	        </td>
    	        <td>
    	            葡萄
   	
    	        </td>
    	        <td>乒乓球</td>
    	    </tr>
    	    <tr>
    	        <td>
    	            莉莉
    	        </td>
    	        <td>
    	            蘋果
    	        </td>
    	        <td>動漫</td>
    	    </tr>
    	</table>
預設方向: 從左到右設定 從右到左
  • 列的順序 完全相反: 1,2,3 列,變成了 3,2,1 列
  • 等同值: direction:rtl = <table class="dirTest" dir="rtl"> </table>
    • 可在標籤的 dir 屬性中設定.

3. CSS3 hanging-punctuation 屬性: 懸掛標點的 位置和符號 (實驗中 屬性)

  • ⑴ 懸掛標點的 位置和符號: hanging-punctuation 屬性,美 /ˌpʌŋktʃuˈeɪʃn/
    • 指定 標點符號 應掛在 一行文字的開頭 還是結尾。
      • 懸掛的標點符號 可以放在 行框外。
    • 實驗中屬性:
      • 這是一項實驗技術
      • 在生產中使用之前，請仔細檢查 瀏覽器相容性表。
  • ⑵ 懸掛標點的 語法
    • hanging-punctuation: none|first|last|allow-end|force-end;
/* 關鍵字值 Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/* 兩個值 Two keywords */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/* 三個值 Three keywords */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/* 全域性值 Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;
  • ⑶ 懸掛標點的 屬性值
    • ① 不懸掛標點: none
      • 不在 文字首行的開頭 或結尾的 行框之外 放置標點符號。
    • ② 首行開始 行框外: first
      • 元素的 第一個格式化行 開始處的 左括號或左引號 掛起。
      • 標點附著在 首行開始邊緣之外。
    • ③ 末行結尾 行框外: last
      • 元素 最後一個格式化行 末尾的 右括號或右引號 掛起。
      • 標點附著在 末行結尾邊緣之外。
    • ④ 對齊不合適 掛起: allow-end
      • 如果 行尾的 句號或逗號 在對齊之前 不合適，則掛起。
    • ⑤ 行尾的 句號逗號 掛起: force-end
      • 行尾的 句號或逗號 掛起。
  • ⑷ 多值
    • hanging-punctuation屬性 可被指定 多個值，可以是 一個值，兩個值，或者 三個值。
    • 1個值: 使用 上面屬性值中的 任何一個 關鍵字值。
    • 2 個值: 使用下列其中一項:
      • first 搭配 last, allow-end, force-end 中的一個
      • last 搭配 first，allow-end,force-end 中的一個
    • 3 個值: 使用下列其中一項:
      • first, allow-end, last
      • first,force-end, last

在這裡插入圖片描述

4. letter-spacing 屬性 : 字元間距 (字元之間的 額外空白/空間)

  • ⑴ 字元間距/ 字元間的空白
    • 定義了在 文字字元框 之間 插入多少空間
    • 屬性設定 文字字元之間 的間距行為
      • 增加或減少 字元間的空白（字元間距）。
        • letter-spacing 屬性
        • 字元間距 屬性
  • ⑵ 字元和字元框
    • 由於 字元字形 通常比其 字元框 要窄
    • 指定長度值時 ,會調整 字母之間 通常的間隔。
  • ⑶ 字元間距的 語法
    • letter-spacing: normal|length|inherit;
/* 關鍵字值 Keyword value */
letter-spacing: normal;

/* 長度值 <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* 全域性值 Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
  • ⑷ 字元間距的 屬性值
    • 字元間距關鍵點：標準 長度值 繼承
    • ① 標準/正常 間距 (預設): normal
      • 字元間 沒有額外的空間
      • 當前字型的 正常字母間距。
      • normal≠ 0,需要時,瀏覽器可調整 字元間距:
        • 與值0不同，此關鍵字 允許使用者代理 更改字元之間的 空格，以 調整/對齊 文字。
    • ② 指定 字元額外間距: length
      • 字元間的 固定空間
      • 指定(除了 字元之間的 預設間距之外的) 額外字元間的 空間。
      • 負值: 允許使用 負值，這會讓 字元之間 擠得更緊。
        • 值可能是負數，但可能存在 特定於實現的限制。
          • 使用者代理 不會為了 調整文字/對齊文字,而進一步 增加或減少 字元間的空間 (因為間距 設定成固定值了)。
    • ③ 繼承父親: inherit
      • 從父元素繼承 letter-spacing 屬性的值。
  • ⑸ 字元間距的 預設繼承性
    • 會被繼承
    • yes
  • ⑹ 字元間距 和 可存取性問題
    • ① 間距太大/小時, 變得不可讀: 較大的 正或負字元間距值 將使單詞樣式 變得不可讀。
      • 對於具有 非常大的 正值的 文字
        • 字母之間的距離 會非常遠，以至於 單詞看起來就像 一系列單獨的、不連線的字母。
      • 對於具有 非常大的 負值的文字
        • 字母之間 會重疊到 無法識別單詞的程度。
    • ② 根據字型 調整 字元間距:
      • 清晰的字母間距 必須根據具體情況 來確定，因為不同的字型 有不同的字元寬度。
      • 沒有一個值 可以確保 所有字型 自動保持其易讀性。

  • ⑺ 字元間距letter-spacing 的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 設定一段文字的 字元之間的間距值
  • html
    	<p class="textTest">
    	    業精於勤是一個漢語成語，拼音是 yè jīng yú qín，意思是指 學業的精進 在於勤奮。出處唐·韓愈《進學解》：「業精於勤，荒於嬉；行成於思，毀於隨。
    	</p>
  • css
.textTest {
    width: 450px;
    border: 10px dashed;
    padding: 10px;
    /*字元之間的間距*/
    letter-spacing: normal;
}
正常間距 (預設值) normal增加 0.2em的額外間距 letter-spacing: 0.2em;
減少 0.2em的額外間距 letter-spacing: -0.2em;字元間距 不正常的字型(太大/太小) 2em, -0.9em

5. line-height 屬性: 設定 行高/行間距 (一行多高,影響 行之間的 距離)

  • ⑴ 行高/行間距: line-height 屬性
    • ① 屬性設定 行框的 高度。
      • ❶ 在塊級元素上
        • 它指定 元素中 行框的最小高度。
      • ❷ 對於 非替換的 內聯元素
        • 它指定 用於 計算 行框高度的 高度。
    • ② 影響 行間距: 會影響 文字行與行 之間的 距離
      • 行高 = 一個文字的中間, 到下一行 文字的中間 相差的距離
      • (或者 文字底部,到下一行 文字的底部的 距離)
      • 所以,行高的變化,也會影響 行距.
        • 行距 = 行高line-height- 字型大小font-size = 行高和字型大小的 差值
        • 注意區分 行間距和行距: 行高 = 行間距 ≠行距,行間距 是行高的別稱.

  • ⑵ 行高、基線、頂線、中線、底線 範例圖

    行高、基線、頂線、中線、底線圖
  • ⑶ 行高/行間距的 語法
    • line-height:normal|number|length|%|inherit;
/* 關鍵字值 Keyword value */
line-height: normal;

/* 無單位值: 字型大小 font-size的倍數  Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* 長度值 <length> values */
line-height: 3em;

/* 百分比值 <percentage> values */
line-height: 34%;

/* 全域性值 Global values */
line-height: inherit;
line-height: initial;
line-height: unset;
  • ⑷ 行高/行間距的 屬性值

    • 標準，數位，長度值，百分比，繼承。

    • ① 正常 行間距(預設): normal

      • 設定 正常的行高,取決於 使用者代理。
      • 預設值: 桌面瀏覽器(包括 Firefox )使用的預設值 大約為1.2，這取決於 元素的 字型。

    • ② 一個數位(無單位),字型大小的 倍數: number(等同於 百分比值的簡寫)

      • 設定數位，行高 = 數位 x 當前的字型大小font-size。
        • 行高和繼承問題: 在大多數情況下，這是 設定行高和 避免 繼承導致的意外結果的 首選方法。
          • 比如,一級標題 h1不繼承父元素 div的字型大小,段落 p卻繼承 父元素div的字型大小時
          • 此時, 容器內,就有兩種不同的 字型大小的文字,如果設定一樣的行高值,沒辦法同時滿足兩個子元素的 行高需要.
        • 優點: 當元素內的 子元素的文字 字型大小font-size 不同時,能設定 相對於 子元素的 當前字型大小的行高.

    • ③ 長度值: length

      • 設定 固定的行高。
      • 指定的 長度值 用於計算 行框高度。em 單元中 給出的值 可能會產生 意想不到的結果

    • ④ 字型大小的 百分比值:%

      • 相對於 元素本身的 字型大小font-size。
        • 行高 = 百分比 x 元素字型大小font-size。

    • ⑤ 繼承父親: inherit

      • 從父元素繼承 line-height 屬性的值。

    • 不能負值: 行高 不允許 負值,負值會被視作 無效值.

    • 預設行高/行間距:

      • 在大多數瀏覽器中預設行高，大約是
        • 110% ~ 120%。
        • 100% 的行間距
          • 則 上一行的字 緊貼著下一行的字，中間 沒有距離。
          • 在這裡插入圖片描述
  • ⑸ 行高和字型大小: 行高line-height < 字型大小font-size時, 將出現 行距為負數的情況，也就是兩行文字 將部分重合。
    • 在這裡插入圖片描述
  • ⑹ 行高的 繼承性
    • 會被繼承
    • yes
  • ⑺ 行高 和 可存取性問題
    • 有助於 視力低下的人:
      • 對於 主要段落內容，行高的最小值為1.5。
        • 這將 有助於 視力低下的人，以及 有閱讀障礙 等認知障礙的人。
    • 確保行高 按比例縮放:
      • 如果 對頁面進行縮放 以增加文字大小，則使用 無單位值 純數位 可確保 行高 按比例縮放。

  • ⑻ 行高 line-height的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 設定一段文字的 行高/行間距 (會影響行距)
.textTest {
    width: 450px;
    border: 10px dashed;
    padding: 10px;

    font-size: 16px;
    line-height: 1.5em;
}
預設 文字行高 = normal 值絕對長度值 行高 line-height: 40px;
相對長度值 行高 1.5em = 150%不帶單位 純數位 line-height: 1.5;
  • 等同值: 當設定 同一個元素的行高時(內部 沒有字型大小不同的 子元素): 1.5 = 1.5em = 150%
    • 行高 = 數值 x 元素的字型大小font-size,都是相對於 當前字型大小的 倍數.
    • 如果不是同一元素的行高,比如,間
  • 範例2: 純數位值 (無單位值) 和 em,%相對長度值的區別
    • 只對最外層的容器 div，進行 行高設定,內部的兩個子元素 h1,p 都不設定行高,看下內部元素的行高變化
  • html
    • 巢狀關係: div > h1 | p
    	<div class="textTest">
    		<h1>業精於勤是一個漢語成語，拼音是 yè jīng yú qín，意思是指 學業的精進 在於勤奮。出處唐·韓愈《進學解》：「業精於勤，荒於嬉；行成於思，毀於隨。</h1>
    	    <p>業精於勤是一個漢語成語，拼音是 yè jīng yú qín，意思是指 學業的精進 在於勤奮。出處唐·韓愈《進學解》：「業精於勤，荒於嬉；行成於思，毀於隨。</p>
    	</div>
  • css
.textTest {
    width: 450px;
    border: 10px dashed;
    padding: 10px;

    font-size: 16px;
}
預設 文字行高 = normal 值設定成 絕對長度值時: 25px (h1 的文字 行高太擠)
設定成 相對長度值: 1.5em = 150%設定成 純數位 不帶單位: line-height: 1.5;
  • ① 帶單位的 行高:25px,1.5em= 150%=1.5 x 16px = 24px
    • 相當於 給div內部的兩個子元素,應用了 一樣 行高值,即使他們的字型大小不同
  • ② 不帶單位的 純數位
    • 相當於 給兩個子元素h1,p 分別設定了 相對於子元素自身字型大小的 行高
    • h1的行高 = h1的字型大小 x 1.5
    • p的行高 = p的字型大小 x 1.5
    • 優點: 當元素內的 子元素的字型大小 不同時,能設定 相對於 子元素當前字型大小的行高.

6. CSS3 punctuation-trim 屬性: 標點修剪 (瀏覽器 都不支援)

  • ⑴ 標點修剪: punctuation-trim 屬性
    • 如果 標點位於 行開頭或結尾處，
      • 或者 臨近另一個 全形標點符號，
      • 是否 對標點符號 進行修剪。
  • ⑵ 標點修剪的 語法
    • punctuation-trim: none|start|end|allow-end|adjacent;
  • ⑶ 標點修剪的 屬性值
    • 關鍵點：不修剪、修剪開啟標誌符號、修剪閉合標誌符號。
    • ① 不修剪: none
      • 不修剪 開啟或閉合 標點符號。
    • ② 修剪 開啟標誌符號: start
      • 修剪每行 結尾的 開啟標點符號。
    • ③ 修剪閉合標點符號: end
      • 修剪每行結尾的 閉合標點符號。
    • ④ allow-end
    • ⑤ adjacent

7. text-align 屬性: 文字 水平對齊 方式

  • ⑴ 文字 水平對齊方式: text-align

    • text-align 屬性 設定元素中的 文字的 水平對齊方式。

    • 行內內容(文字)的 水平對齊: 定義 行內內容（例如 文字）如何 相對它的 父塊元素 對齊。

      • 並不控制 塊元素 本身的對齊，只控制 塊元素的 行內內容(文字)的對齊。
      • text-align不控制 文字的 最後一行:
        • 因為這一行 經常和其他行 長短不一,不適合一起控制 ?
        • 使用text-align-last 屬性: 指定文字 最後一行的 水平對齊方式

    • 通過指定 行框 與哪個點對齊

      • 從而設定 塊級元素的 文字 的 水平對齊方式。
  • ⑵ 文字水平對齊的 繼承性
    • 會被繼承
    • yes
  • ⑶ 文字水平對齊 text-align的 語法
    • text-align:left|right|center|justify|inherit;
/* 關鍵字值 Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
/*下方的屬性值 支援度還不好 暫時不用少用*/
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* 表列中 基於字元的對齊 Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* 塊對齊值 Block alignment values (非標準語法 Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* 全域性值 Global values */
text-align: inherit;
text-align: initial;
text-align: unset;
  • ⑷ 文字水平對齊的 屬性值
    • ① 左對齊(預設值): left
      • 把文字 排列到左邊。
      • 行內內容 對齊到 行框的左邊緣。
        • 預設值：沒有設定 direction:rlt時 的預設值.
    • ② 右對齊: right
      • 把文字排列到右邊。
        • 行內內容 對齊到 行框的右邊緣。
      • 設定文字流向 從右到左 direction:rlt時 的預設值.
    • ③ 居中對齊: center
      • 把文字 排列到中間。
        • 行內內容 在行框中 居中。
    • ④ 兩端對齊: justify
      • 實現 兩端對齊 文字效果。
        • 除最後一行外，文字的左右邊緣 應與 行框的左右邊緣 對齊。
    • ⑤ 繼承父親: inherit
      • 從父元素 繼承 text-align 屬性的值。
    • ★ 預設值
      • 關聯屬性: 與方向direction屬性 相關聯
        • 如果 direction 屬性是 ltr，則預設值是left；
        • 如果 direction 是 rtl，則為 right。
  • ⑸ 文字水平對齊text-align 和 direction屬性的 關聯影響
    • ① 沒有設定 文字水平對齊 text-align的時
      • direction 屬性,文字的流向 會影響 水平對齊的預設值.
        • direction:ltr,文字會 左對齊
        • direction:rtl,文字會 右對齊
    • ② 設定 文字水平對齊後
      • direction 只會改變 文字的流向,不會再影響 對齊方式.

  • ⑹ 文字水平對齊 text-align的 瀏覽器支援

在這裡插入圖片描述

範例1: 設定一段文字的 水平對齊方式

.textTest {
    width: 400px;
    border: 10px dashed;
    padding: 10px;

    font-size: 16px;
    margin: 10px;
}
左對齊 text-align:left;右對齊 text-align:right;
居中對齊 text-align:center;兩端對齊 text-align:justify;
  • 範例2: 標準相容的 方式 : 居中塊元素本身 , 而不是居中 塊元素的 內聯/行內內容(即 文字)
    • 將 左右外邊距,設定為自動 auto (下方 3 種設定方式,效果等同)
      • = ❶ margin: auto; = ❷ margin: 0 auto;
      • = ❸ margin-left: auto; margin-right: auto;
      • 把塊元素,放在父元素的 正中間.
margin: 0 auto;

在這裡插入圖片描述

7.1 CSS3 text-align-last 屬性: 文字最後一行 水平對齊方式 (搭配 direction,text-align 屬性)

  • ⑴ 文字 最後一行的 水平對齊方式: text-align-last
    • 描述的是一段文字中 最後一行 在被強制換行之前的 對齊規則。
    • 作用物件:
      • vertical-align 只對 行內元素、表格單元格元素 生效,不能用於 垂直對齊 塊級元素。
  • ⑵ 文字最後一行的 水平對齊text-align-last的 語法
    • text-align-last: auto | start | end | left | right | center | justify;
/* 關鍵字值 Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* 長度值 <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* 百分比值 <percentage> values */
vertical-align: 20%;

/* 全域性值 Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
  • ⑶ 文字最後一行 水平對齊 text-align-last的 屬性值
    • ① 與text-align關聯: auto
      • 受影響的行 按文字水平對齊text-align的值 對齊，
      • 兩端對齊除外: 除非 文字水平對齊是 兩端對齊 text-align: justify
        • 在這種情況下，效果與text-align-last: start是一樣的,根據文字的方向 來決定.
    • ② 與 direction 關聯,參考起點: start
      • 與 direction的設定有關。
        • ❶ 左對齊:
          • 如果文字展示方向 是從左到右direction :ltr，則 起點在左側，則是左對齊；
        • ❷ 右對齊:
          • 如果文字展示方向 是從右到左direction :rtl，則 起點在右側，則是右對齊。
        • ❸ 瀏覽器 預設方向: 如果沒有設定 direction，則按照 瀏覽器文字的 預設顯示方向 來確定。
    • ③ 與 direction 關聯,參考終點: end
      • 與 上方start 值的 結果相反,是以 終點為參考的.
    • ④ 左對齊: left
      • 文字 對齊到 行框的左邊緣。
    • ⑤ 右對齊: right
      • 文字 對齊到 行框的右邊緣。
    • ⑥ 居中對齊: center
      • 文字 在行框中 居中。
    • ⑦ 兩端對齊: justify
      • 最後一行文字的 開頭與 行框的 左側對齊，末尾與右側對齊。
        • 文字應該 將它們的 左右邊緣 對齊到 行框的左右內容邊緣。
  • ⑷ text-align-last 的 瀏覽器支援

    • 需要使用 瀏覽器字首

在這裡插入圖片描述

  • 範例1: 把一段內容的 文字水平對齊 保持左對齊,改變 文字最後一行的對齊方式
.textTest {
    width: 400px;
    border: 10px dashed;
    padding: 10px;
    margin: 0 auto;
    font-size: 16px;
    /*文字水平對齊*/
    text-align: left;

    /*文字最後一行 水平對齊*/
    text-align-last: auto;
}
① 預設顯示② text-align-last: auto;
③ 起點對齊 text-align-last: start;④ 終點對齊 text-align-last: end;
⑤ 左對齊 text-align-last: left;⑥ 右對齊 text-align-last: right;
⑦ 居中對齊 text-align-last: center;⑧ 兩端對齊 text-align-last: justify;

7.2 CSS3 text-justify 屬性: 文字兩端對齊的 空間分隔方式 (搭配 text-align 屬性)

  • ⑴ 文字兩端對齊的 空間分隔方式: text-justify
    • 當 text-align: justify 時
      • 即 文字的 水平對齊方式 = 兩端對齊 時的 分隔方式。
  • ⑵ 文字兩端對齊 分隔方式的 語法
    • text-justify: auto|inter-word|inter-character|distribute;
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* 已廢棄的屬性值 Deprecated value */
  • ⑶ 文字兩端對齊 分隔方式的 屬性值
    • ① 瀏覽器 自動決定 (預設值): auto
      • 瀏覽器決定 兩端對齊 演演算法。
      • 這種對齊方式 將是 最適合某種語言文字的 排版（例如：英語，中文，日語，韓語等）。
    • ② 禁用 兩端對齊: none
      • 禁用 兩端對齊。
      • 表現的效果 和沒有設定 text-align 一樣
        • 當你因為某種原因 需要在已經設定了 text-align 的元素上 禁用 兩端對齊效果的時候，可以使用.
        • 谷歌 chrome中沒有這個效果,火狐瀏覽器中 有這個效果.
    • ③ 調整 單詞間距離: inter-word
      • 增加/減少 單詞間的間隔。
      • 在文字中的單詞之間 新增空間 來實現行對齊（會改變 word-spacing 的值）
        • 比如 英語或韓語 最適合使用 這個屬性值 來用 空格分隔單詞 的語言。
    • ④ 調整 字元間距離: inter-character
      • 通過 在文字中的 字元之間 新增空間 來實現行對齊（會改變 letter-spacing 的值）
        • 比如 日語 最適合使用 這個屬性值的語言。
    • ⑤ 分散: distribute (已廢棄 屬性值)
      • 美 [dɪ’strɪbjut]
      • 散佈
      • 類似 報紙版面，除了在東亞語系中 最後一行是不齊行的。
        • 顯示效果與設定了inter-wrod一致，不提倡使用 這個屬性，現在這個屬性 或許還能有效果，但那完全是為了 向後相容而被保留著。
  • ⑷ 文字兩端對齊 分隔方式的 瀏覽器支援

    • 實驗中屬性,行為可能會發生變化

在這裡插入圖片描述

  • 範例1:給一段文字設定 兩端對齊的水平對齊,並設定 兩端對齊時 空間的分隔方式

  • css

.textjustify{
    width: 30%;
    background-color: #d0d0d0;
    padding: 10px;	
    border: solid black 2px;
    font-size: 1.2em;	

    /*text-align: justify;*/
    /*text-justify:auto;*/
    /*text-justify:none;*/
    /*text-justify:inter-word;*/
    /*text-justify:inter-character;*/
    /*text-justify:distribute;*/

}
  • html
    <p class="textjustify">金無足赤,人無完人。出自宋·戴復古《寄興》：「黃金無足色，白璧有微瑕。求人不求備，妾願老君家。」 也比喻不能要求一個人沒有一點缺點錯誤,應該嚴以律己,寬以待人。<br />No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>
預設 水平對齊水平 兩端對齊 text-align: justify; ( 預設= text-justify:auto;)
禁用 兩端對齊 text-justify:none;調整 單詞間距離 inter-word
調整 字元間距離 inter-character分散 distribute (已廢棄屬性值)
  • 文字兩端對齊的分隔方式
    • 瀏覽器自動決定 auto ,會根據語言 自行進行空間分隔
      • 所以後面的 調整 單詞間距離(英語中),調整字元距離 (漢語中),效果看上去 區別不大.

7.3 vertical-align 屬性: 垂直對齊方式 (針對 行內元素,表格單元格內容)

  • ⑴ 垂直對齊 方式: vertical-align,美 ['vɝtɪkl]
    • ① 指定 行內元素（inline）或 表格單元格（table-cell）元素的 垂直對齊方式。
    • ② 在表單元格中
      • 垂直對齊屬性 會設定 單元格內容的 對齊方式。
    • ③ 塊級元素的垂直對齊: 不使用 vertical-align.
      • 可以設定 塊的行高 = 高度
      • 塊中的文字垂直居中:line-height = height
  • ⑵ 垂直對齊 使用範圍
    • vertical-align 只對 ❶ 行內級的元素(inline-level elements)、❷ 表格單元格元素 生效：不能用它 垂直對齊 塊級元素
      • ① 行內元素: 將 內聯元素的框 垂直對齊到 包含它的 行框中。
        • 行內級元素(inline-level elements):
          • 內聯級元素 按行排列。
            • 建立新行: 一旦元素的數量 超過了當前行 所能容納的數量，就會在當前行下方 建立新行。
            • 行框: 所有這些行 都有一個所謂的 行框，它包含 該行的所有內容。
              • 不同大小的內容 表示 不同高度的行框。
        • display =
          • ❶ inline
          • ❷ inline-block
            • 內聯的塊元素
            • 可以有寬度和高度(可能由它自己的內容定義)以及內邊距、邊框和外邊距。
          • ❸ inline-table
          • 行內/(內聯)元素: 基本上是 包裝文字的 標籤。
        • 它可以用來 把圖片<img> 垂直放置在 一行文字中
        • 在這裡插入圖片描述
      • ② 表格單元格: 垂直對齊 表格的單元格內容
        • 在這裡插入圖片描述
  • ⑶ 垂直對齊的 語法
    • vertical-align: baseline | sub | super | top | text-top | middle | bottom| text-bottom | length | % |inherit;
/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
  • ⑷ 垂直對齊的 屬性值
  • Ⅰ.針對 行內元素的值

    • ① 相對父元素 的值

      • 這些值 使元素相對其父元素 垂直對齊
      • ❶ 父元素 基線(預設值) :baseline
        • (基線 : 父元素基線)
        • 使 元素的基線 與 父元素的基線 對齊。
          • 被替換元素的 基線: 一些 被替換元素(如<textarea>)的基線 ,沒有由 HTML規範指定，這意味著 它們對這個關鍵字的行為, 在不同的瀏覽器之間 可能有所不同。
      • ❷ 父元素的 下標基線: sub
        • (基線 : 父元素 下標基線)
          • 使 元素的基線 與 父元素的下標基線 對齊。
      • ❸ 父元素的 上標基線: super
        • (基線 : 父元素 上標基線)
          • 使 元素的基線*與 父元素的下標基線 對齊。
      • ❹ 父元素 文字頂部: text-top
        • (頂部 : 父元素 文字頂部)
          • 使 元素的頂部 與 父元素的 字型頂部 對齊。
      • ❺ 父元素 文字底部: text-bottom
        • (底部 : 父元素 文字底部)
          • 使 元素的底部 與 父元素的字型底部 對齊。

      • ❻ 父元素的 中線: middle

        • (中線 : 父元素中線)

          • 使 元素的中部 與 [父元素的基線 + 父元素x-height(x的高度)的一半] 對齊。

    在這裡插入圖片描述

      • ❼ 父元素的基線 (位移的 指定長度值): length
        • (基線 : 父元素基線)
          • 使 元素的基線 對齊到 父元素的基線之上的 給定長度。可以是 負數。
      • ❽ 父元素基線 (位移的 行高的 指定百分比值): %
        • (基線 : 父元素基線,行高百分比)
          • 使用 「line-height」 屬性的百分比值 來排列此元素。
        • 使 元素的基線 對齊到 父元素的基線之上的 給定百分比
          • 該百分比值 是 行高line-height屬性的 百分比。
        • 負值: 預設向上位移, 負值表示 方向相反, 向下位移.

    • ② 相對行的 值

      • 下列值 使元素 相對整行 垂直對齊：
      • ❶ 整行的頂部: top
        • (頂部 : 整行的頂部)
        • 把元素的頂端 與行中 最高元素的頂端 對齊
          • 使 元素 及其後代元素的頂部 與 整行的頂部 對齊
      • ❷ 整行的底部: bottom
        • (底部 : 整行的底部)
        • 把元素的底端 與行中 最低的元素的 底端對齊。
          • 使 元素 及其後代元素的底部 與 整行的底部 對齊。
          • 對於 沒有基線的元素，則使用 外邊距的下邊緣 代替。

    • ③ 屬性值 的正負

      • 允許指定 負長度值和百分比值。
        • 使元素 降低 位置而 不是升高。
  • Ⅱ. 針對 表格 單元格內容 的值
    • ① 單元格 基線相互對齊: baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)
      • (單元格基線 : 單元格基線)
        • 使 單元格的基線，與 (該行中 所有 以基線對齊的) 其它單元格的基線 對齊。
        • 將 單元格的基線 與 (基線對齊的行中的) 所有 其他單元格的基線 對齊。
    • ② 行的頂部 對齊: top
      • (內邊距框的頂部 : 行的頂部)
        • 使 單元格的 內邊距的 上邊緣/頂部 與 該行的頂部 對齊。
    • ③ 行的居中 對齊: middle
      • 使 單元格 內邊距框 在該行內 居中對齊。
    • ④ 行的底部 對齊: bottom
      • (內邊距框的底部 : 行的底部)
        • 使 單元格內邊距的下邊緣/底部 與 該行底部 對齊。
    • ⑤ 可以負值: 可以是負數。
  • ⑸ 文字基線
    • 像西文字母 坐在基線(小寫字母x的下邊緣)上一樣，
    • 漢字和標點符號 也都坐在 漢字基線上。
      • 漢字基線
        • 比漢字字面的 下邊緣要高。
      • 基線: （baseline）是
        • 西文字型設計與排版的概念
        • 源自 西文字母的 主體底部 對齊的位置。
  • super
    • superscript
      • 英 ['suːpəskrɪpt; 'sjuː-]
    • adj. 標在上方的
    • n. 上標

  • ⑹ 垂直對齊 vertical-align的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 將 內聯元素的框 垂直對齊到 包含它
  • css
.verticalTest{
	width: 700px;
	text-decoration: underline overline;
	font-size: 1.5em;
	/*line-height = font-size x 1.5 = 1.5em x 1.5 = 1.5 x 16 x 1.5*/
	line-height: 1.5em;
	background-color: #d0d0d0;
	padding: 10px;

	border: 2px solid green;


}
.verticalTest img{ 
	/* 10px/16px = 0.625 */
	margin-right: 0.625em;

}
  • html
    <p class="verticalTest">
        baseline:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:baseline" />
        sub:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:sub" />
        super:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:super" />
        text-top:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:text-top" />
        text-bottom:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:text-bottom" />
        middle:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:middle" />
    </p>

    <p class="verticalTest">
        0px:(基線重疊)= baseline
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:0px" />
        10px (父元素 基線上方10px)
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:10px" />
        0.5em:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:0.5em" />
        -0.5em:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:-0.5em" />5
        0%:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:50%" />
        -50%:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:-50%" />

    </p>

    <p class="verticalTest">
    	top:
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:top" />
    	bottom: 
        <img src="https://mdn.mozillademos.org/files/15189/star.png" alt="" style="vertical-align:bottom" />  
     
    </p>

在這裡插入圖片描述

  • 範例2: 設定 表格單元格內容的 垂直對齊
  • css
.verticalTable{
	width: 50%;
}
table.verticalTable ,.verticalTable th,.verticalTable td{
	border: 1px solid green;
}
.verticalTable td{
	padding: 10px;
	background-color: #d0d0d0;
}
  • html
    <!-- 表格單元格內容的 垂直對齊 -->

    <table class="verticalTable">
    	<tr>
    		<th>基線對齊</th>
    		<th>行的頂部</th>
    		<th>居中</th>
    		<th>行的底部</th>
    		<th>一段文字(未設定垂直對齊)</th>
    	</tr>
    	<tr>
    		<td style="vertical-align: baseline">baseline</td>
    		<td style="vertical-align:top">top</td>
    		<td style="vertical-align:middle">middle</td>
    		<td style="vertical-align: bottom">bottom</td>
    		<td >自知之明, 是一個漢語成語，讀音為 zì zhī zhī míng，指了解自己的情況，能正確認識自己的 長處與短處。 出自《老子》。</td>
    	</tr>
    </table>

在這裡插入圖片描述

8. text-decoration 屬性: 文字 裝飾(線)

  • ⑴ 文字裝飾(線): 設定文字上 裝飾線的外觀

    • 使用 text-decoration 屬性, 文字裝飾 屬性

    • ① 文字修飾的顏色

      • 由 前景色(含 文字顏色)"color" 屬性設定。
      • 由顏色屬性決定，和字型一個顏色

    • ② 後代元素會繼承 裝飾線: 如果後代元素 沒有自己的裝飾，祖先元素上 設定的裝飾會 「延伸」到 後代元素中。

      • 這意味著，如果元素 指定了 文字裝飾，則子元素 不能刪除裝飾。

    • ③ 簡寫屬性: text-decoration屬性是一種 簡寫屬性，並且可以使用 普通屬性三個值中的任何一個。

      • 普通屬性 如下：
      • text-decoration-line
        • 裝飾線的位置: 文字修飾的位置, 如下劃線underline，刪除線line-through
      • text-decoration-color
        • 裝飾線的顏色
      • text-decoration-style
        • 裝飾線的樣式, 如波浪線wavy ,實線 solid ,虛線 dashed
  • ⑵ 文字裝飾的 語法
    • text-decoration:none|underline|overline|line-through|blink|inherit;
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
  • ⑶ 文字裝飾text-decoration的 屬性值 (不做簡寫屬性時,只表示 裝飾線的位置)
    • 關鍵點：無裝飾、上劃線、貫穿線、下劃線、閃爍、繼承。
    • ① 無裝飾線(預設值) : none
      • 無裝飾，只有文字。
    • ② 下劃線: underline
      • 定義 文字下的 一條線。
    • ③ 上劃線: overline
      • 定義 文字上的 一條線。
    • ④ 貫穿線(刪除線): line-through
      • 定義 穿過文字下的一條線。
    • ⑤ 閃爍: blink
      • 定義 閃爍的文字。
    • ⑥ 繼承父親: inherit
      • 從父元素繼承text-decoration 屬性的 值。
    • 做簡寫屬性時: text-decoration 可以同時設定 裝飾線的位置,樣式 和 顏色.
  • ⑷ 文字裝飾 text-decoration的 瀏覽器支援

    • IE ,Edge,不支援 text-decoration 為簡寫

在這裡插入圖片描述

  • 範例1: 裝飾線的繼承性,會被後代繼承,並且無法 被後代元素覆蓋
  • css
.textdec {
	/*給文字 新增下劃線*/
    text-decoration: underline;
    width: 30%;
    background-color: #d0d0d0;
    padding: 10px;
    line-height: 1.5em;
}
.textdec strong {
	/*取消強調文字的下劃線*/
    text-decoration: none;
    color: green;
}
  • html
    <p class="textdec">
        <strong>少壯不努力，老大徒傷悲。</strong>意思是,年輕力壯的時候 不奮發圖強，到了老年 再悲傷也沒用了。出處,《樂府詩集·長歌行》
    </p>

在這裡插入圖片描述

  • ① 下劃線的 繼承性: 由上圖可見,子元素strong 設定了 無下劃線
    • 因為父元素 設定了 下劃線,子元素strong這裡 仍然 顯示下劃線,不能取消 從父元素繼承的 裝飾線,並且裝飾線 都是黑色的.
  • ② 兩個 裝飾線:
    • strong {text-decoration: overline;} 將導致第二次裝飾 出現在「一些強調詞」上,而且上劃線顏色 是子元素 單獨設定的字型顏色.
    • 可以新增一個裝飾線
  • 在這裡插入圖片描述
  • 可以在子元素中 再新增一次 裝飾線,會變成子元素的顏色.
    • 不是父元素的黑色了,變成了子元素的綠色
    • 在這裡插入圖片描述
  • 範例2: 同時指定 一段文字的 裝飾線的 位置,樣式 和 顏色
  • css
.decline{
    background-color: #d0d0d0;
    text-decoration:underline wavy #008000;

/*	text-decoration-line: underline;
	text-decoration-style:wavy;
	text-decoration-color: green;*/


}
  • html
    <p class="decline">
    	<del>紙上得來終覺淺，</del>絕知此事要躬行。
    </p>
  • text-decoration:underline wavy #008000;屬性值 前後順序 不影響.
    在這裡插入圖片描述

8.1 text-decoration-line: 文字 裝飾線的位置 (上 中 下)

  • ⑴ 文字裝飾線的 位置: text-decorator-line 設定用於元素中的文字的 裝飾型別(即 文字裝飾線型別 )。
    • (如下劃線 或上劃線)
    • 多值: 文字裝飾線 位置 text-decorator-line屬性 被指定為 none、一個或多個 空格 分隔的 值。
  • ⑵ 裝飾線位置的 語法
    • text-decoration-line: none | [ underline || overline || line-through || blink ]
/* 單個 關鍵字值 Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* 多個 關鍵字值,同時指定幾條裝飾線 Multiple keywords */
text-decoration-line: underline overline;               /* Two decoration lines */
text-decoration-line: overline underline line-through;  /* Multiple decoration lines */

/* 全域性值  Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;
  • ⑶ 文字裝飾線的 屬性值
    • ① 無裝飾線: none
      • 沒有文字裝飾,沒有裝飾線
    • ② 下劃線: underline
      • 每一行文字 下面 都有一條 裝飾線。
    • ③ 上劃線: overline
      • 每行文字 上面 都有一條 裝飾線。
    • ④ 刪除線(貫穿線): line-through
      • 每行文字 中間 都有一條 裝飾線。
    • ⑤ 文字閃爍: blink(已棄用的 屬性值)
      • 文字閃爍(在可見和不可見之間交替)。符合規範的使用者代理可能根本不會閃爍文字。這個值不贊成CSS動畫。
  • ⑷ 裝飾線位置的 瀏覽器支援
    • 都不支援blink的屬性值

    • 需要使用 瀏覽器字首

在這裡插入圖片描述

  • 範例1: 給一段文字 新增裝飾線
  • css
.decline{
    background-color: #d0d0d0;
	text-decoration-line: overline;
	/*text-decoration-line: line-through;*/
	/*text-decoration-line: underline;*/
	/*text-decoration-line: blink;*/

}
  • html
    <p class="decline">
    	紙上得來終覺淺，絕知此事要躬行。
    </p>
上劃線 overline刪除線(貫穿線) line-through
下劃線 underline閃爍 (無任何效果,blink 屬性值瀏覽器不支援)

8.2 text-decoration-style: 文字 裝飾線的 樣式

  • ⑴ 裝飾線的樣式: text-decoration-style
  • 用於設定由text-decoration-line設定的 線的樣式。
    • 同一裝飾線 不能設定 不同樣式:
      • 線的樣式 會應用到 所有被 text-decoration-line 設定的線，不能為 其中的每條線 設定 不同的樣式。
    • 語意化的標籤:
      • 如果 設定的修飾效果 具有特定的語意，例如 刪除線, 意味著 某些文字被刪除了，開發者 最好使用 有語意的 HTML 標籤來表達，比如 <del> 或 <s> 標籤
      • 因為瀏覽器 有時可能會 遮蔽某些樣式，但語意化的標籤 則不會出現這樣的問題。
    • 簡寫屬性: 當要設定 裝飾線的 修飾屬性時，用 text-decoration 簡寫屬性 會比分別寫多個屬性 更方便。
  • ⑵ 裝飾線樣式的 語法
    • text-decoration-style: solid | double | dotted | dashed | wavy
/* 關鍵字值 Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* 全域性值 Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
  • ⑶ 裝飾線樣式的 屬性值
    • 實線: solid
      • 畫一條實線。
    • 雙實線: double
      • 畫一條雙實線。
    • 點虛線:dotted
      • 畫一條點劃線。
    • 虛線: dashed
      • 畫一條虛線。
    • 波浪線: wavy, 美 /ˈweɪvi/
      • 畫一條波浪線。
    • 不畫線: -moz-none(尚未標準化)
      • 不畫線。亦可用 text-decoration-line: none 替代。
  • ⑷ 裝飾線樣式的 瀏覽器支援

    • IE 不支援, 其他瀏覽器 需要 瀏覽器字首

在這裡插入圖片描述

  • 範例1: 給一段文字新增 不同的裝飾線樣式
  • css
.decline{
    background-color: #d0d0d0;
	text-decoration-line: underline;
	text-decoration-style:double;
	/*text-decoration-style:dotted;*/
	/*text-decoration-style:dashed;*/
	/*text-decoration-style:wavy;*/

}
雙實線 double點虛線 dotted
直虛線 dashed波浪線 wavy

8.3 text-decoration-color: 文字 裝飾線的 顏色

  • ⑴ 文字裝飾線的 顏色: text-decoration-color
    • 用於設定 文字修飾線的 顏色。
      • 應用範圍: 被指定的顏色 會作用到 該屬性值 有效範圍內的 所有裝飾線上。
    • 設定 不同裝飾線 不同顏色的方法
      • 沒有直接的機制 為每種線型 指定唯一的顏色，不過可以通過 巢狀元素的方法 來實現這種效果
      • 用 text-decoration-line 屬性 為每個元素 應用一種線型，再用 text-decoration-color 指定線的顏色。
  • ⑵ 裝飾線顏色的 語法和屬性值
    • text-decoration-color : <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
    • 合法顏色值 都可以使用.
  • 範例1: 給一段文字 新增不同顏色的 裝飾線
  • css
.decline{
    background-color: #d0d0d0;
	text-decoration-line: underline;
	text-decoration-style:wavy;
	text-decoration-color: green;


}

.decline del{
	text-decoration-line: line-through;
	text-decoration-color:red;


}
  • html
    <p class="decline">
    	<del>紙上得來終覺淺，</del>絕知此事要躬行。
    </p>

在這裡插入圖片描述

9. CSS3 text-emphasis 屬性: 新增 文字強調符號

  • ⑴ 給文字 新增強調符號: text-emphasis 美 ['ɛmfəsɪs] , 強調

    • 將強調標記 應用於文字(空格 和 控制字元除外)。

    • 簡寫屬性 text-emphasis:

      • 在一個宣告中 同時設定 文字強調的樣式和顏色
      • text-emphasis-style 和 text-emphasis-color。
        • 所以, 文字強調text-emphasis 不會重置 text-emphasis-position位置 的值
  • ⑵ 強調符號的大小
    • 和 ruby 符號一樣，強調符號的大小 大約是 字型大小的 50%.
    • 影響行高: 當前的行距 不足以顯示 強調符號時，文字強調 text-emphasis 可能會 影響行高。
  • ⑶ 文字強調適合的 字型
    • Adobe 的 「Kenten Generic OpenType Font」 是一個適合 強調標記的字型
    • 它專門為 強調標記設計。
  • ⑷ 文字強調的語法
    • text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>;
/* 初始值 Initial value */
text-emphasis: none; /* No emphasis marks */

/* 字串值 <string> value */
text-emphasis: 'x';
text-emphasis: '點';
text-emphasis: '\25B2';
text-emphasis: '*' #555;
text-emphasis: 'foo'; /* 不應使用。它可以僅被計算為「f」 或呈現為「f」 Should NOT use. It may be computed to or rendered as 'f' only */

/* 關鍵字值 Keywords value */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* 關鍵詞值 與 顏色 相結合 Keywords value combined with a color */
text-emphasis: filled sesame #555;

/* 全域性值 Global values */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: unset;
  • ⑸ 文字強調 text-emphasis 的屬性值
    • 沒有強調符號: none
      • 沒有 文字強調符號.
    • Ⅰ. 空心實心
      • ① 實心的(填充純色): filled
        • 形狀填充了純色. 既沒有 filled,也沒有 open時,這是預設值.
      • ② 空心的: open
        • 形狀是 空心的。
    • Ⅱ. 強調符號的形狀
      • ① 小點/小圓圈: dot
        • 顯示 小圓圈 作為標記。
          • 實心點 filled dot: •(U+2022)
          • 空心點 : ◦(U+25E6).
      • ② 大點/大圓圈: circle
        • 顯示 大圓圈 作為標記。
        • 實心圓圈: ● (U+25CF)
        • 空心圓圈: ○ (U+25CB).
        • 這是 水平書寫模式下的 預設形狀.
      • ③ 實心/空心 雙圓圈: double-circle
        • 顯示 雙圓圈 作為標記。
          • 實心雙圓圈 ◉ (U+25C9),
          • 空心雙圓圈: ◎ (U+25CE).
      • ④ 實心/空心 三角形: triangle
        • 將 三角形 顯示為標記。
          • 實心三角形: ▲ (U+25B2)
          • 空心三角形: △ (U+25B3).
      • ⑤ 芝麻符號: sesame
        • 將 芝麻樣式 顯示為標記。
          • (類似 頓號的樣式,像是芝麻的種子, 沒找到正規表達方式,簡記 芝麻符號)
            • 實心芝麻符號: ﹅(U+FE45),
            • 空心芝麻符號: ﹆ (U+FE46).
        • 這是在 沒有其他形狀的情況下，垂直書寫模式的 預設形狀.
      • ⑥ 指定 字串: <string>
        • 將 給定的字串 顯示為標記。
        • 僅限一個字元: 不應該在 <string>中 指定一個以上的字元.
        • 使用者代理 可以截斷或忽略 由多個字元 組成的字串。
    • Ⅲ. 顏色: <color>
      • 定義 強調符號的顏色。
      • 如果沒有顏色，則預設為 currentColor。
  • ⑹ 文字強調 text-emphasis 和 文字裝飾線 text-decoration的區別
    • text-decoration 文字裝飾線 屬性 不會繼承，並且指定的裝飾線 將應用於整個元素。
    • text-emphasis 文字強調 會繼承，這意味著 可以為後代 更改強調標記。
  • ⑺ 文字強調的 瀏覽器支援

    • 需要瀏覽器字首

在這裡插入圖片描述

  • 範例 1: 給一段文字 新增文字強調符號

  • css

.textemphasis{
    width: 35%;
    /*background-color: #d0d0d0;*/
    padding: 10px;	
    border: solid black 2px;
    font-size: 1.2em;
}
.textemphasis strong{
	-webkit-text-emphasis-position:under;
	-webkit-text-emphasis:dot;
	-webkit-text-emphasis:open dot;
	/*-webkit-text-emphasis:circle;*/
	/*-webkit-text-emphasis:open circle;*/
	/*-webkit-text-emphasis:double-circle;*/
	/*-webkit-text-emphasis:open double-circle;*/
	/*-webkit-text-emphasis:triangle;*/
	/*-webkit-text-emphasis:open triangle;*/
	/*-webkit-text-emphasis:sesame;*/
	/*-webkit-text-emphasis:open sesame;*/

	/*指定字串 作為文字強調的符號*/
	/*-webkit-text-emphasis:"z";*/
	/*-webkit-text-emphasis:"x";*/
	/*-webkit-text-emphasis:"大";*/

    /*同時設定 空心/實心/強調符號/顏色*/
	/*-webkit-text-emphasis: circle open;*/
	/*-webkit-text-emphasis: circle open red;*/


}
  • html
        <p class="textemphasis">
        	<strong>取其精華，去其糟粕。</strong>是一個漢語成語，讀音qǔ qí jīng huá qù qí zāo pò意思是吸取事物中最好的東西，捨棄事物中壞的，無用的東西。
        </p>
小點: dot = filled dot小圓圈: open dot
大點: circle大圓圈: open circle
實心 雙圓圈: double-circle空心 雙圓圈: open double-circle
實心 三角形: triangle空心 三角形: open triangle
實心 芝麻符: sesame空心 芝麻符: open sesame
指定為 英文字元: "z"指定為 漢字: "大"
預設 顏色/位置:circle指定 顏色/位置: circle open red

  • ① 預設的位置: 漢語中,不指定位置,文字強調符號的位置 預設 在上方

    • 在這裡插入圖片描述

  • ② 預設: 實心的.

  • ③ 指定字元 不能指定空心/實心:

    • 無效值: -webkit-text-emphasis:open "z";,會直接跳過.

  • 視覺效果的 區別: 文字小的時候,有些 相同 文字強調符號 區別看起來不明顯.

9.1 text-emphasis-style 屬性: 文字強調符號的 樣式/形狀

  • ⑴ 文字強調符號的 樣式/形狀: text-emphasis-style
    • 屬性 設定 強調標記的外觀/形狀。
    • 設定和重置: 還可以使用 文字強調的簡寫 text-emphasis來 設定和重置。
  • ⑵ 文字強調 形狀樣式的 語法
    • text-emphasis-style:none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>;
/* 初始值 Initial value */
text-emphasis-style: none; /* 沒有強調符號 No emphasis marks */

/*  值 value */
text-emphasis-style: 'x';
text-emphasis-style: '點';
text-emphasis-style: '\25B2';
text-emphasis-style: '*';
text-emphasis-style: 'foo'; /* 不應使用。它可以僅被計算為「f」或呈現為「f」 Should NOT use. It may be computed to or rendered as 'f' only */

/* 關鍵字值 Keywords value */
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/* 全域性值  Global values */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: unset;

  • ⑶ 文字強調 形狀樣式的 屬性值**

    • Ⅰ. 空心實心
      • ① 實心的(填充純色): filled
        • 形狀填充了純色. 既沒有 filled,也沒有 open時,這是預設值.
      • ② 空心的: open
        • 形狀是 空心的。
    • Ⅱ. 強調符號的形狀
      • ① 小點/小圓圈: dot
        • 顯示 小圓圈 作為標記。
          • 實心點 filled dot: •(U+2022)
          • 空心點 : ◦(U+25E6).
      • ② 大點/大圓圈: circle
        • 顯示 大圓圈 作為標記。
        • 實心圓圈: ● (U+25CF)
        • 空心圓圈: ○ (U+25CB).
        • 這是 水平書寫模式下的 預設形狀.
      • ③ 實心/空心 雙圓圈: double-circle
        • 顯示 雙圓圈 作為標記。
          • 實心雙圓圈 ◉ (U+25C9),
          • 空心雙圓圈: ◎ (U+25CE).
      • ④ 實心/空心 三角形: triangle
        • 將 三角形 顯示為標記。
          • 實心三角形: ▲ (U+25B2)
          • 空心三角形: △ (U+25B3).
      • ⑤ 芝麻符號: sesame
        • 將 芝麻樣式 顯示為標記。
          • (類似 頓號的樣式,像是芝麻的種子, 沒找到正規表達方式,簡記 芝麻符號)
            • 實心芝麻符號: ﹅(U+FE45),
            • 空心芝麻符號: ﹆ (U+FE46).
        • 這是在 沒有其他形狀的情況下，垂直書寫模式的 預設形狀.
      • ⑥ 指定 字串: <string>
        • 將 給定的字串 顯示為標記。
        • 僅限一個字元: 不應該在 <string>中 指定一個以上的字元.
        • 使用者代理 可以截斷或忽略 由多個字元 組成的字串。
  • ⑷ 文字強調符號的形狀的 瀏覽器支援

    • 需要使用 瀏覽器字首

在這裡插入圖片描述

9.2 text-emphasis-color 屬性: 文字強調符號的 顏色

  • ⑴ 文字強調符號的 顏色: text-emphasis-color
    • 屬性 設定 強調標記的顏色。
    • 還可以使用文字強調簡寫text-emphasis 設定此值。
  • ⑵ 文字強調符號的 顏色的 語法
    • text-emphasis-color: <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>;
/* 初始值 Initial value */
text-emphasis-color: currentColor;

/* 合法顏色值 <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

/* 全域性值 Global values */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: unset;
  • ⑶ 文字強調符號的顏色的 瀏覽器支援

    • 需要 瀏覽器字首

在這裡插入圖片描述

9.3 text-emphasis-position: 文字強調符號的 位置

  • ⑴ 文字強調符號的 位置: text-emphasis-position
    • 屬性 設定 強調符號的位置。
    • 影響行高: 像 ruby 文字一樣，如果 沒有足夠的空間 放置強調標記，行高就會增加。
  • ⑵ 文字強調符號的 位置的 語法
    • text-emphasis-position: [ over | under ] && [ right | left ];
/* 初始值 Initial value */
text-emphasis-position: over right;

/* 關鍵字值 Keywords value */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/* 全域性值 Global values */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: unset;
  • ⑶ 文字強調符號的位置的 屬性值
    • 針對 不同的書寫模式,設定上下,或左右.
    • ① 上方: over
      • 在水平書寫模式下, 在文字上方 畫上標記。
    • ② 下方: under
      • 在水平書寫模式下，在文字下方 畫上記號。
    • ③ 右邊: right
      • 在垂直書寫模式下，在文字右側 繪製標記。
    • ④ 左邊: left
      • 在垂直書寫模式下，在文字的左側 繪製標記。
  • ⑷ 文字強調標記/符號的 首選位置
    • 文字強調標記的首選位置 取決於語言。
    • 日語中,偏向於 右方,上方
    • 漢語中,偏向於 右方,下方
  • 幾種語言的 文字強調符號的 偏向位置.
語言文字強調符號的首選位置
水平 書寫模式垂直 書寫模式
① 日語上方 over右邊 right
② 韓語
③ 蒙古語
④ 漢語下方 under右邊 right
  • ⑸ 文字強調標記/符號的位置的 瀏覽器支援

    • 需要 瀏覽器字首

在這裡插入圖片描述

10. text-indent 屬性: (塊元素 首行) 文字的 縮排量 (空白長度)

  • ⑴ 塊元素 首行文字前面的縮排量(空白長度): text-indent , 美 /ɪn’dɛnt/
    • 定義 一個塊元素 首行文字內容之前的 縮排量。
    • 設定 文字塊中 首行文字的縮排。
      • 屬性設定 塊中的 第一個內容行的 空白空間長度(縮排)。
      • 常用於 建立 一個 「分頁」效果。
  • ⑵ 文字縮排的 語法
    • text-indent:length|%|inherit;
/* 長度值 <length> values */
text-indent: 3mm;
text-indent: 40px;

/* 百分比值 相對於 包含自身的元素的 寬度 <percentage> value
   relative to the containing block width */
text-indent: 15%;

/* 關鍵字值 目前尚未標準化 不要使用 Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全域性值 Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
  • ⑶ 文字縮排的 屬性值: 裝飾線的 顏色
    • ① 長度值: length
      • 使用固定的<length>長度值 來指定 文字的縮排。
        • 定義 固定的縮排。
      • 允許使用 負值。
      • 預設值：0。
    • ② 父元素寬度 百分比值: %
      • 基於 父元素的寬度 的百分比的 縮排。
    • ③ 繼承父親: inherit
      • 繼承屬性值
      • 從父元素 繼承 text-indent 屬性的值。
    • ④ 縮排每一行: each-line(實驗中屬性,尚未標準化)
      • 文字縮排 會影響第一行，以及使用<br>強制斷行後的 第一行。
    • ⑤ 反轉縮排(類似 懸掛效果): hanging(實驗中屬性,尚未標準化)
      • 該值會對所有的行 進行反轉縮排：除了第一行之外的所有的行 都會被縮排，看起來就像第一行 設定了一個負的縮排值。
  • ⑷ 文字縮排的 負值
    • 允許使用負值。
    • 懸掛縮排: 如果使用負值，那麼首行 會被縮排到 左邊。
      • 允許指定 負值，這會產生一種「懸掛縮排」的效果。

  • ⑸ 文字縮排的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 對一段文字 進行文字縮排
  • css
.textindent {
    width: 40%;
    background-color: #d0d0d0;
    padding: 10px;

    /*設定文字縮排*/
    text-indent: 50px;
/*  text-indent: 3em;
    text-indent: -2em;
    text-indent: 10%;*/
    
}
  • html
    <p class="textindent">
    	「<strong>勿以惡小而為之，勿以善小而不為。</strong>惟賢惟德，能服於人。」 勸人要進德修業，有所作為。不要因為好事小 而不做，更不能因為壞事小 而去做。小善積多了,就成為利天下的大善，而小惡積多了則 「足以亂國家」。
    </p>

  • 文字不設定縮排時的 預設樣式

在這裡插入圖片描述

絕對值縮排 50px相對值縮排 3em
負值縮排 (懸掛縮排) -2em百分比縮排 10%

11. CSS3 text-outline 屬性: 文字輪廓 (瀏覽器 都不支援)

  • ⑴ 文字輪廓的 瀏覽器支援
    • 目前主流瀏覽器 都不支援 text-outline 屬性。
      • 設定文字輪廓。
        • text-outline 屬性
        • 文字輪廓屬性
  • ⑵ 文字輪廓的 語法
    • text-outline: thickness blur color;
  • ⑶ 文字輪廓的 屬性值
    • ① 粗細。
      • thickness
      • 必需。
      • 輪廓的粗細。
    • ② 模糊半徑。
      • blur
      • 可選。輪廓的模糊半徑。
    • ③ 顏色。
      • color
      • 必需。輪廓的顏色。

12. CSS3 text-overflow 屬性: 隱藏文字溢位時 的顯示 (搭配 overflow,white-space,display 屬性)

  • ⑴ 文字溢位時的 顯示: text-overflow
    • 當文字溢位 容器時,溢位的內容 怎麼顯示。

      • 可以 剪下它、顯示省略號(’…’)或顯示 自定義字串。

在這裡插入圖片描述

  • ⑵ 文字溢位顯示 text-overflow 屬性的適用物件
    • 塊級元素的內容: 只對那些 在塊級元素中 溢位的內容 有效
      • 方向: 且 溢位的內容 必須要 與塊級元素 內聯(inline)方向一致,即 行尾(行的 左端/右端)的溢位行為
      • （如：內容在盒子的 下方溢位。此時就 不會生效）。
  • ⑶ 文字溢位顯示 text-overflow 和 文字溢位 的關係
    • 文字溢位屬性 不會 強制 文字溢位 的發生。
    • 文字溢位 搭配的屬性:
      • 要使 文字溢位 它的容器，必須設定 搭配 其他的 CSS屬性:溢位和空白 overflow,white-space,如 ↓
overflow: hidden;white-space: nowrap;
  • ⑷ 文字溢位的 情況：
    • 當其因為某種原因 而無法換行(例子：設定了 white-space:nowrap)
    • 一個單詞 因為太長 而不能合理地被安置(fit)。
  • ⑸ 文字溢位的 語法
    • text-overflow: [ clip | ellipsis | <string> ]{1,2};
/* 行尾的 溢位行為  Overflow behavior at line end
   Right end if ltr, left end if rtl */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

/* 溢位 在左端|在右端的行為 ,方向性 沒有影響 Overflow behavior at left end | at right end
   Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: "…" "…";
text-overflow: fade clip;
text-overflow: fade(10px) fade(10px);
text-overflow: fade(5%) fade(5%);

/* 全域性值 Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;
  • ⑹ 文字溢位的 屬性值
    • ① 裁剪 (預設值): clip
      • 裁剪文字。
      • 文字溢位的 截斷位置: 一般在 容器的極限處 進行截斷。
        • 即 將溢位的文字 裁剪掉, 因此在字元的中間 可能會發生截斷。
        • 為了能在兩個字元過渡處 截斷，必須使用 一個空字串值 ('')
    • ② 省略號: ellipsis
      • [ɪ’lɪpsɪs]
      • 顯示 省略符號 = 被修剪的文字。
      • 「用一個省略號 (’…’, U+2026 HORIZONTAL ELLIPSIS)來表示 被截斷的文字」。
        • 減少 顯示的文字: 省略號 被新增在 內容區域中，因此 會減少顯示的文字。
        • 省略號 也可能被截斷: 如果空間太小到 連省略號都容納不下，那麼這個省略號 也會被截斷。
    • ③ 指定 字串: string
      • 使用 給定的字串 來代表 被修剪的文字。
      • 字串 <string> = 被截斷的文字。
        • 字串內容 將被新增在 內容區域中，所以會 減少 顯示出的文字。
        • 如果空間太小到 連字串 都容納不下，那麼這個字串 也會被截斷。
  • 裁剪處 顯示空白: 如果想在 裁剪處 顯示空白符，可以使用 ('').
  • ⑺ 多值
    • 可以使用 1個或 2個值 指定 文字溢位的 屬性值。
    • 1 個值: 給定一個值
      • 它將指定 行尾 的溢位行為
      • (從左到右的文字的 右端，從右到左的文字的 左端)。
    • 2 個值: 給定兩個值
      • 第一個: 指定 行左端 溢位行為
      • 第二個: 指定 行右端 溢位行為。
    • 每個值 被指定為:
      • 其中一個關鍵字值: clip,ellipsis, fade
      • 字串 <string>.
      • fade()函數
  • ⑻ overflow 和 text-overflow 的區別
    • ① overflow
      • 針對 所有資料: 是針對容器內 所有的資料 溢位的 統一處理方式,
        • 容器內的儲存的是 文字/圖片, 還是其他的資料 統一取值;
          • hidden 隱藏
          • scroll 卷軸顯示
          • visible溢位顯示
    • ② text-overflow
      • 針對 溢位的文字: 是專門針對 盒子內的 文字溢位 時的處理方式
      • 搭配屬性: 必須設定 overflow:hidden,只有這樣text-overflow才有效
      • text-overflow的屬性值 是建立在 有隱藏的溢位內容 的基礎上
        • 顯示在容器內: 隱藏的溢位內容的 替代符號 都是在容器內顯示的,作為文字內容的一部分
  • ⑼ 使用注意事項
    • 當設定了 文字溢位顯示,卻沒有效果時 ,要注意 搭配下方的屬性
width: 100%;  /*也可以是固定值、min-width這些*/
white-space: nowrap;  /*強制文字不能換行*/
overflow: hidden;  /*隱藏溢位內容*/
text-overflow: ellipsis;
  • 必須是塊元素:
    • 如果是<a>、<span>這種 行內元素，必須加上display: block 成為塊元素
      • 行內元素的預設寬度 就是文字的寬度 且無法設定width.
  • ⑽ 文字溢位顯示的 瀏覽器支援
    • 需要 瀏覽器字首
      • IE 8 提供了帶有 瀏覽器字首的版本， -ms-text-overflow，和text-overflow作用相同。但是並不推薦這樣使用。
      • Opera 9 和 10 要求帶有 瀏覽器字首 -o-text-overflow。

    • 倒數四個 都是實驗中屬性,支援度也很差

在這裡插入圖片描述

  • 範例1: 給一段文字 設定溢位 和 溢位時的顯示
  • css
.textjoverflow{
    width: 30%;
    background-color: #d0d0d0;
    padding: 10px;	
    border: solid black 2px;
    font-size: 1.2em;	

    /*設定不換行,才會有文字溢位*/
    white-space: nowrap;
    /*設定 overflow 溢位隱藏,文字溢位顯示 才有效*/
    overflow: hidden;
    text-overflow: clip;
    /*text-overflow: ellipsis;*/
    /*目前不支援 指定字串 所以此值無效*/
    /*text-overflow: "";*/

    /*direction: rtl;*/
}
  • html
    <p class="textjoverflow">金無足赤,人無完人。「黃金無足色，白璧有微瑕。求人不求備，妾願老君家。」 <br />No one is perfect, everyone will make mistakes.</p>
預設顯示不允許換行時的 預設溢位顯示
溢位文字 被隱藏 overflow: hidden;隱藏的溢位文字 被裁剪 (預設值) text-overflow: clip;
隱藏的溢位文字 = 省略號 text-overflow: ellipsis;文字流向 從右向左 direction: rtl; (行尾溢位)
  • 讓文字溢位時的顯示text-overflow 有效的 前提
    • ① 必須是 塊元素的 文字內容: display: block,行內元素不可以
    • ② 必須 有文字溢位,比如,設定不換行: white-space: nowrap;
    • ③ 溢位的文字,必須是 隱藏的: overflow: hidden;
    • → 最後 設定 隱藏的溢位文字的 顯示 :text-overflow 才會有效.

13. text-transform 屬性: 文字 大小寫轉換

  • ⑴ 文字 大小寫 轉換: text-transform, 美 /trænsˈfɔːrm/
    • 控制 文字的大小寫。
      • 它可以用於 使文字顯示為 全大寫 或 全小寫，也可單獨 對每一個單詞 進行操作。
  • ⑵ 特定語言的對映
    • text-transform 屬性考慮到 特定於語言的 案例對映規則，如以下所示:
      • 在土耳其語言中
        • 特定詞彙的 2 種 i: Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba),有兩種 i,帶點和不帶點，兩個大小寫配對
          • i/İ和ı/I.
      • 在德語中
        • German (de), ß 的大寫 變成SS
      • 在荷蘭語中
        • Dutch (nl), ij 變成 IJ,即使只設定 首字母大寫 text-transform: capitalize
      • 在希臘語中
        • Greek (el),當整個單詞 都是大寫時，母音就 失去了它們的重音 ά/Α, (ή/Ή 除外).
        • 同樣，在第一個母音上 有重音的雙母音 會失去重音，而在第二個母音上 有重音 άι/ΑΪ
      • 在愛爾蘭語中
        • Irish (ga),小寫字母sigma 有兩種形式: σ and ς
        • ς 僅在西格瑪 終止一個單詞時使用
        • 大寫西格瑪 Σ 轉化成 小寫西格瑪時 text-transform: lowercase,瀏覽器 需要根據上下文 選擇正確的小寫形式。
  • ⑶ 文字大小寫轉換的 語法
    • text-transform:none|capitalize|uppercase|lowercase|inherit;
/* 關鍵字值 Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/* 全域性值 Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;
  • ⑷ 文字大小寫轉換的 屬性值
    • 關鍵點：不轉換、首字母大寫（每個單詞）、全部大寫、全部小寫、繼承。
      • ① 不轉換大小寫 (預設值): none
        • 不轉換文字的大小寫。
          • 這個關鍵字 阻止所有字元的大小寫 被轉換。
        • 字元 保持不變(它們保留 元素文字中 寫入的原始大小寫)。
      • ② 首字母大寫: capitalize
        • 美 /ˈkæpɪtəlaɪz/
        • 文字中的 每個單詞 以大寫字母開頭。
        • 將每個單詞的第一個字母 轉換為大寫的關鍵字。
          • 首字母之外的 原始大小寫: 其他字元 保持不變(它們保留 元素文字中 寫入的原始大小寫)。
          • 被忽略的 開頭符號: 字母是Unicode字元集 或者 數位裡定義的字元 ；因此單詞開頭的 任何標點符號或者特殊符號 將會被忽略。
      • ③ 全大寫: uppercase
        • 美 /'ʌpɚ,kes/
        • 僅有 大寫字母。
        • 這個關鍵字 強制所有字元 被轉換為大寫。
      • ④ 全小寫: lowercase
        • 美 /'loɚ,kes/
        • 無大寫字母，僅有小寫字母。
        • 這個關鍵字 強制所有字元 被轉換為小寫。
      • ⑤ 繼承父親: inherit
        • 從父元素繼承 text-transform 屬性的值。
  • ⑸ 連字元單詞的 首字母大寫
    • 隨瀏覽器而改變
    • 例如，文字 「w3-school」 可以用兩種方式顯示：
      • 「W3-school」 和 「W3-School」。
    • CSS 並沒有規定 哪一種是正確的，所以這兩種 都是可以的。
  • 範例1: 將一段文字,進行大小寫轉換
  • css
.texttransform{
    width: 35%;
    background-color: #d0d0d0;
    padding: 10px;
    font-weight: bold;	
    font-size: 1.2em;	

    /*改變文字的大小寫*/
    /*text-transform:capitalize;*/
    /*text-transform:uppercase;*/
    /*text-transform:lowercase;*/
}
  • html
    <p class="texttransform">金無足赤,人無完人。<br />No one is perfect, everyone will make mistakes.</p>
預設樣式首字母大寫 capitalize
全大寫 uppercase全小寫 lowercase

14. CSS3 text-shadow 屬性: 文字的陰影 (含 裝飾線 text-decoration)

  • ⑴ 文字的陰影: text-shadow
    • 為 文字 和 文字裝飾線 text-decoration 新增陰影
    • 在這裡插入圖片描述
  • ⑵ 文字陰影的語法
    • text-shadow: h-shadow v-shadow blur color;
/* x 偏移量 offset-x | y 偏移量 offset-y | 模糊半徑 blur-radius | 顏色 color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* 使用預設的 顏色和模糊半徑 */
text-shadow: 5px 10px;

/* 全域性值 Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
  • ⑶ 文字陰影的 屬性值

    • 正值：右下方，負值：左上方

      • 關鍵點：水平陰影，垂直陰影，模糊距離，陰影顏色

    • ① 水平陰影 偏移量(必需): h-shadow

      • 水平陰影的 位置。
        • 允許負值。
          • 這些長度值 指定陰影 相對文字的 偏移量。
          • <offset-x> 指定 水平偏移量
          • 負值: 若是 負值則 陰影位於 文字左邊。

    • ② 垂直陰影 偏移量( 必需): v-shadow

      • 垂直陰影的 位置。
        • 允許負值。
          • <offset-y> 指定 垂直偏移量
          • 負值: 若是負值 則陰影位於文字上面。
          • 如果水平和垂直偏移量 均為 0，則 陰影位於文字 正後方

    • ③ 模糊距離: blur

      • 可選。模糊的距離。
      • 這是 長度值 <length> 值。
        • 預設值: 如果沒有指定，則預設為0。
        • 值越大，模糊半徑 越大，陰影也就 越大越淡（wider and lighter）。

    • ④ 陰影顏色: color

      • 可選。陰影的顏色。
      • 陰影顏色的位置: 可以在 偏移量之前 或之後指定。
        • 如果 沒有指定顏色，則使用 UA（使用者代理）自行選擇的顏色。
        • 如果想確保 跨瀏覽器的一致性，請明確地 指定一種顏色.
  • ⑷ 多個陰影: 可以設定 多個陰影
    • 用 逗號,分隔 的 陰影列表
    • 每個陰影的 組成
      • 由元素 在 X和Y方向的 偏移量、模糊半徑 和 顏色值 組成。
      • 省略的長度: 0。
    • 每個陰影的 屬性值
      • 長度值+顏色值: 有兩個或三個 長度值 和 一個可選的 顏色值 進行規定。
        • ① 前兩個 長度<length>引數
          • 是以「文字中心」為原點的 座標軸
          • x軸 偏移量 <offset-x>
          • y軸 偏移量 <offset-y> 的值；
        • ② 如果有第三個 長度值 <length>引數
          • 則第三個數值 為形成陰影效果的 半徑的數值 <blur-radius>。

  • ⑸ 陰影 應用順序: 當所給的陰影 大於 1 個時，陰影應用的順序 為 從前到後

    • 第一個指定的陰影: 在頂部.

  • ⑹ 文字陰影 適用的偽元素:

    • 這個屬性 同時適用於::first-line 以及::first-letter 偽元素.
  • ⑺ 文字的陰影的 瀏覽器支援
    • 出於 效能考慮，Opera 最多支援 6-9 個文字陰影。模糊半徑 限制為 100px。
    • 如果<color>值 未指定，那麼 Firefox 將使用元素的 color 屬性值。

    • IE 10 才開始支援

在這裡插入圖片描述

  • 範例1: 給一段文字設定 文字的陰影
  • css
.textshadow{
    width: 40%;
    background-color: #d0d0d0;
    padding: 10px;
    font-weight: bold;	
    font-size: 1.5em;

    text-shadow:3px 3px green ;
}
  • html
    <p class="textshadow">海納百川，有容乃大；壁立千仞，無欲則剛。</p>
設定 水平和垂直陰影 text-shadow:3px 3px;設定指定顏色的 水平和垂直陰影
設定 帶模糊距離的 x,y 陰影偏移量 text-shadow:3px 3px 1px green;加大模糊半徑 text-shadow:3px 3px 10px green;
x 陰影偏移量 負值 (向左偏移)y 陰影偏移量 負值 (向上偏移)
  • ① 不設定 文字陰影顏色
    • 文字陰影顏色 = 文字的顏色
  • ② 同時設定: x,y 陰影偏移量 必須同時設定,只設定一個 沒效果,沒陰影.
    • 無效值: text-shadow:3px green;
    • 有效值: text-shadow:3px 3px green;
  • ③ 文字的裝飾線 也會出現陰影
    • 在這裡插入圖片描述

15. CSS3 text-wrap 屬性: 文字換行 (瀏覽器 都不支援)

  • ⑴ 文字換行的 瀏覽器支援
    • 目前主流瀏覽器 都不支援 text-wrap 屬性。
      • 設定文字的換行規則。
        • text-wrap 屬性
        • 文字換行 屬性
  • ⑵ 文字換行的 語法
    • text-wrap: normal|none|unrestricted|suppress;
  • ⑶ 文字換行的 屬性值
    • 關鍵點：允許的換行點 不換行 任意處換行 壓縮換行
    • ① 允許的換行點。
      • normal
      • 只在允許的換行點 進行換行。
    • ② 不換行。
      • none
      • 不換行。
      • 元素無法容納的文字 會溢位。
    • ③ 任意處換行。
      • unrestricted
      • 美 [,ʌnrɪ’strɪktɪd]
      • 無限制的，自由的。
      • 在任意兩個字元間 換行。
    • ④ 壓縮換行。
      • suppress
      • 美 [sə’prɛs]
      • 壓縮 元素中的換行。
      • 瀏覽器只在行中 沒有其他有效換行點時 進行換行。

16. unicode-bidi 屬性: 雙向文字的 重寫/覆蓋 (搭配 direction 屬性)

  • ⑴ 雙向文字的 重寫/覆蓋
    • ① 搭配屬性: unicode-bidi 屬性和direction 屬性搭配, 決定 如何處理檔案中 的 雙向文字 (雙向文字 處理)。
      • 例如，如果一個內容塊 同時包含 從左到右 和 從右到左 的文字
      • 瀏覽器使用演演算法: 那麼使用者代理 使用複雜的 Unicode統一碼演演算法 來決定 如何顯示文字。
    • ② 覆蓋 瀏覽器演演算法: unicode-bidi 屬性 覆蓋了 這個 Unicode統一碼演演算法，允許開發人員 控制文字嵌入。
    • ③ 不受all屬性影響: unicode-bidi 與 direction 是僅有的兩個 不受 all 屬性 影響的屬性。
  • ⑵ 雙向文字重寫的 語法
    • unicode-bidi:normal | embed | isolate | bidi-override | isolate-override | plaintext;
/* 關鍵字值 Keyword values */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;
/* 全域性值 Global values */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: unset;
  • ⑶ 雙向文字重寫unicode-bidi的 屬性值
    • ① 不嵌入,不覆蓋/重寫:normal
      • 相對於 雙向演演算法:
        • 元素不提供 額外的嵌入級別
      • 對於內聯元素: 隱式重新排序 可以 跨元素邊界 進行
        • 無嵌入層,不改順序: 不使用 附加的嵌入層面，原來是什麼順序 就使用什麼順序（預設）
    • ② 嵌入,不覆蓋/重寫: embed
      • 內聯元素
        • 開啟與 雙向演演算法相關的 附加嵌入級別。
      • 嵌入層的方向: 由方向direction 屬性給出。
        • 有嵌入層,隱式重排序: direction 屬性的值 指定嵌入層的方向，在物件內部 進行 隱式 重排序
    • ③ 按照方向 嚴格覆蓋/重寫: bidi-override
      • 內聯元素
        • 將建立一個覆蓋
      • 塊容器元素
        • 為 不在 另一個塊容器元素內 的 內聯級 (行內)後代 建立覆蓋。
      • 即 在元素內部，根據 方向direction屬性 嚴格 按順序 重新排序;
        • 不僅文字的流向 會變化,連相鄰文字之間的先後順序,也會變化.
        • 忽略了 雙向演演算法的隱式部分。
        • 有嵌入層,嚴格重排序建立一個 附加的嵌入層面，嚴格按照 direction 屬性的值重排序
    • 3個新屬性值: 下面的屬性值 瀏覽器支援度 不是很好,需要瀏覽器字首
    • ④ isolate
      • 計算元素的容器 方向性: 這個關鍵字表明，應該在 不考慮元素內容 的情況下 計算元素的容器 方向性。
      • 和兄弟元素 隔離:
        • 因此，該元素 與它的兄弟元素 隔離。
        • 在應用其 雙向解析度演演算法時，其容器元素 將其視為 一個或多個 影象。
    • ⑤ isolate-override
      • 將 isolation 關鍵字的隔離行為 應用於 周圍的內容
      • 將 bidi-override 關鍵字的覆蓋行為 應用於 內部內容
    • ⑥ plaintext
      • 使元素的 方向性計算 不考慮它的 父雙向狀態 或 方向direction屬性的值。
      • 方向性 計算: 是使用Unicode雙向演演算法的 P2 和 P3 規則 計算的。
      • 允許 顯示 已經使用 Unicode雙向演演算法的工具 進行格式化的資料。
  • ⑷ 雙向文字 重寫unicode-bidi的 瀏覽器支援

    • 最新的 3 個屬性值的支援度 不好,要使用字首

在這裡插入圖片描述

  • 範例1: 搭配 方向direction 屬性,給一段文字分別設定 normal,embed,bidi-override屬性值
    • 文字流向為 從左到右時: direction: ltr;,分別設定 上方三個值,文字 沒有變化.
    • 文字流向為 從右到左時: direction: rtl;,分別設定 上方三個值,文字變化 如下:
文字流向 左到右時 direction: ltr;文字流向 右到左時: direction: rtl; (配 normal 值)
嵌入,不重寫/覆蓋 unicode-bidi: embed;嵌入,嚴格重寫/覆蓋 unicode-bidi: bidi-override;

17. CSS3 word-break 屬性: 單詞 換行/斷行 位置 (能否 詞內斷行)

  • ⑴ 單詞 換行/斷行 位置: word-break 屬性
    • 設定 是否在單詞內部 進行斷點換行。
      • 指定了 怎樣在 單詞內 斷行。
      • 設定 文字將溢位 其內容框的地方 是否出現 換行符。
  • ⑵ 單詞換行的 語法
    • word-break:normal | break-all | keep-all | break-word;
/* 關鍵字值 Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* deprecated 已廢棄 */

/* 全域性值 Global values */
word-break: inherit;
word-break: initial;
word-break: unset;
  • ⑶ 單詞換行的 屬性值
    • ① 瀏覽器 預設換行: normal
      • 使用 瀏覽器 預設的換行規則。
      • 單個單詞太長時,也可能會出現文字溢位
        • 在這裡插入圖片描述
    • ② 任意處/詞內 斷行(非中日韓文字):break-all
      • 為了防止溢位，應該在 任何兩個字元之間 插入斷字(不包括中文/日文/韓文文字)。
        • 允許 可在單詞內 換行。
        • 對於non-CJK (CJK = 指中文/日文/韓文) 文字，可在 任意字元間 斷行。
    • ③ 不能 詞內斷行: keep-all
      • 只能在 半形空格 或 連字元處 換行。
        • 中日韓 CJK 文字: 不能隨意斷行,只能在 斷點處,一般是 標點符號的位置斷行,句子太長,可能會溢位。
          • 一個句子太長,可能會溢位容器
            • 在這裡插入圖片描述
        • 非中日韓 Non-CJK 文字: 表現 同 瀏覽器預設行為 normal。
    • ④ 單詞處 斷行: break-word
      • 與 word-break: normal和overflow-wrap: anywhere 具有相同的效果，而不考慮overflow-wrap屬性的 實際值。

  • ⑷ 單詞換行/斷行 位置的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 給一段文字 設定 單詞斷行位置

  • css

.wordbreak{
    width: 30%;
    background-color: #d0d0d0;
    padding: 10px;	
    border: solid black 2px;
    font-size: 1.2em;	

    /*單詞換行處 設定*/
    word-break: normal;
    /*word-break: break-all;*/
    /*word-break: keep-all;*/
    /*word-break: break-word;*/

}
  • html
    <p class="wordbreak">金無足赤,人無完人。出自宋·戴復古《寄興》：「黃金無足色，白璧有微瑕。求人不求備，妾願老君家。」 也比喻不能要求一個人沒有一點缺點錯誤,應該嚴以律己,寬以待人。<br />No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>
預設顯示 = word-break: normal;任意處斷行(可單詞內斷行) word-break: break-all;
不能單詞內斷行 (中日韓 不斷行) word-break: keep-all;單詞處斷行 = = word-break: normal;

18. CSS3 word-wrap / overflow-wrap 屬性: 單詞 斷行時的 斷行位置 (斷句/斷行 方式)

  • ⑴ 單詞 斷行時的 斷行方式 : word-wrap 屬性

    • 用來說明 當一個 不能被分開的字串 太長 而不能填充其容器時，
      • 防止溢位: 為防止 其溢位，瀏覽器 是否允許 這樣的單詞 中斷換行。
        • 允許 長單詞或 URL 地址 換行到下一行。

  • ⑵ 重新命名和別名:

    • 重新命名: word-wrap 屬性 原本屬於微軟的 一個私有屬性
      • 在 CSS3 現在的 文字規範草案中 , 已經被重名為 overflow-wrap。
    • 別名: word-wrap 現在被當作 overflow-wrap 的 「別名」。
      • 穩定的谷歌 Chrome 和 Opera 瀏覽器版本 支援這種新語法。
    • 優先使用 word-wrap 屬性名,目前 瀏覽器支援度更好些.
  • ⑶ 單詞 換行/斷行方式 語法
    • word-wrap: normal | break-word | anywhere;
/* 關鍵字值 Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* 全域性值 Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
  • ⑷ 單詞 換行/斷行方式 屬性值
    • ① 斷點處 換行 (預設值): normal
      • 只在 允許的斷字點 換行
      • （瀏覽器 保持預設處理）。
        • 表示 在正常的 單詞結束處 換行。
      • 可能會出現 文字溢位.
    • ② (溢位的)長單詞/長中文句子 強制分割: break-word
      • 如果行內 沒有多餘的地方 容納該單詞到結尾，則那些正常的 不能被分割的單詞 會被強制 分割換行。
        • 切斷單詞，在單詞內部 進行換行。
          • 在長單詞,長中文句子 或 URL 地址 內部 進行換行。
        • 不會出現 文字溢位.
    • ③ 任意處斷行(防溢位): anywhere (瀏覽器支援度 很差,不要使用)
      • 為了 防止溢位，如果行中 沒有其他可接受的斷點，則可能在任何點上 中斷一個原本不可中斷的字串(如 長單詞或URL)。
      • 在斷點處 沒有插入 任何連字元。
  • ⑸ word-break 和 word-wrap的 區別 .
    • word 單詞 的概念
      • 中文中, 一個字 就相當於一個單詞，
      • 英文中, 要有一個空格 才將他們分割為 一個單詞；
    • word-break強調的是: 能否 單詞內的斷句,範圍是 全部文字.
    • word-wrap 強調的是: 單詞內 斷句方式,範圍是 需要斷句的文字.
    • 長單詞 強行斷句
      • ① word-wrap:break-word 與 word-break:break-all 共同點:
        • 都能把 長單詞 強行斷句
        • 都不會出現 長單詞/長中文句子的 文字溢位.
      • ② 不同點: 會不會 開始一個新行
        • word-wrap:break-word : 會 先起一個新行 來放置長單詞，新的行 還是放不下這個長單詞 則會對長單詞 進行強制斷句；
        • word-break:break-all: 不會 把長單詞 放在一個新行裡，當這一行 放不下的時候 就直接 強制斷句了。
  • ⑹ 瀏覽器支援
    • 使用 word-wrap名稱, 比 overflow-wrap屬性名 瀏覽器支援度更好

    • anywhere 屬性值 不要使用,支援度很差

在這裡插入圖片描述

  • 範例1: 給一段文字 設定 斷行 和 單詞斷行時的方式
  • css
.wordbreak{
    width: 20%;
    background-color: #d0d0d0;
    padding: 10px;	
    border: solid black 2px;
    font-size: 1.2em;	

    /*單詞換行處 設定*/
    /*word-break: normal;*/
    /*word-break: break-all;*/
    /*word-break: keep-all;*/
    /*word-break: break-word;*/



}

.wordwrap{
    
    /*單詞 斷行位置*/
	/*word-wrap: normal;*/
    /*word-wrap: break-word;*/

}
  • html
    <p class="wordbreak wordwrap">金無足赤,人無完人。出自宋·戴復古《寄興》：「黃金無足色，白璧有微瑕。求人不求備，妾願老君家。」 也比喻不能要求一個人沒有一點缺點錯誤,應該嚴以律己,寬以待人。<br /> No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.Nooneisperfecteveryonewillmakemistakes</p>
  • 預設顯示 = word-break: normal; = word-wrap: normal;
    • 在這裡插入圖片描述
可詞內斷行 word-break: break-all;長單詞 強制斷行 word-wrap: break-word;
不允許 詞內斷行 word-break: keep-all;同時設定 不允許 詞內斷行 word-break: keep-all; 和 強制長單詞 斷行 word-wrap: break-word;
  • ① 同時設定 詞內斷行 word-break: break-all; 和 長單詞 強制斷行 word-wrap: break-word;
    • 顯示效果 是詞內斷行的效果,因為 範圍是全文,包含了長單詞斷行,而且,該斷行的 都斷行/換行了,不需要 再進行 長單詞 強制斷行設定了.
  • ② 同時設定 不允許 詞內斷行 word-break: keep-all; 和 強制長單詞 斷行 word-wrap: break-word;
    • 兩個效果都有,因為 不允許詞內斷行,可能會 造成文字溢位,有需要進行 長單詞強制斷行的地方

19. word-spacing 屬性: 單詞/字 之間的 距離

  • ⑴ 單詞之間的距離: word-spacing 屬性
    • 增加或減少 單詞之間的 空白/間隔距離（即 字間隔）。
      • 漢字: 漢字之間沒有空格的時候 不受影響,有空格 會受影響.
    • 設定元素中 字之間 插入多少空白符。
      • 設定 單詞之間 和 標籤之間 的 空間長度。
        • 「字」 的定義: 為 由 空白符包圍的 一個字串。
  • ⑵ 單詞/字間距的 語法
    • word-spacing:normal|<length> | <percentage>|inherit;
/* 關鍵字值 Keyword value */
word-spacing: normal;

/* 長度值 <length> values */
word-spacing: 3px;
word-spacing: 0.3em;

/* 百分比值 <percentage> values */
word-spacing: 50%;
word-spacing: 200%;

/* 全域性值 Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;
  • ⑶ 單詞/字間距的 屬性值
    • ① 預設 單詞間距(預設值) : normal
      • 正常的 單詞間距，由 當前字型 或 瀏覽器 定義。
        • 定義 單詞間的 標準空間。
        • 不改變單詞間的間距 = word-spacing: 0;
    • ② 額外 單詞間距: 長度值: length
      • 通過 指定具體的額外間距 來增加字型的 單詞間距。
        • 單詞間的 固定空間。
        • 設定為 固定的間距。
    • ③ 額外 單詞間距: 百分比值: <percentage>(瀏覽器支援度很差,勿用)
      • 通過 指定 受影響字元的寬度 的百分比 的方式 來增加的間距。
    • ④ 繼承父親: inherit
      • 從父元素 繼承 word-spacing 屬性的值。
    • 負值: 讓字/單詞之間 擠得更緊,縮短 單詞/字 之間的距離
      • 將單詞間距 設定為負值，

  • ⑷ 單詞/字間距的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 給一段文字 設定 單詞之間的距離
  • css
.wordspace {
    width: 25%;
    background-color: #d0d0d0;
    padding: 10px;
    border: solid black 2px;
    font-size: 1.1em;
    
    /*設定單詞/字 之間的距離*/
    word-spacing: normal;
    /*word-spacing:4px;*/
    /*word-spacing:-4px;*/
    /*word-spacing:1em;*/
    /*word-spacing:-1em;*/
    /*百分比值 目前各大主流瀏覽器 不支援*/
    /*word-spacing:10%;*/
}
  • html
    <p class="wordspace">金無 足赤,人無 完人。比喻 不能要求一個人 沒有一點缺點錯誤,應該 嚴以律己,寬以待人。
        <br />No one is perfect, everyone will make mistakes,be strict with yourself and lenient toward others.</p>
  • 預設樣式 = word-spacing: normal;
    • 在一些漢字中 刻意地 新增了一些空格,觀察是否 受 word-spacing 的影響
    • 在這裡插入圖片描述
單詞/字間距 增加 word-spacing:4px;單詞/字間距 減少 word-spacing:-4px;
單詞/字間距 增加 word-spacing:1em;單詞/字間距 減少 word-spacing:-1em;
  • 對漢字的影響: 漢字之間 有空格時,也會受影響,沒有空格 則不會受影響.
  • 可存取性 問題
    • 不可讀: 較大的正或負 單詞/字間距值 將使 句子不可讀。
      • ① 對於具有非常大的正數值的文字
        • 單詞之間的距離 將非常遠，以至於它將 不再顯示為一個句子。
      • ② 對於帶有較大負值的文字
        • 單詞之間會 相互重疊，以至於無法識別 每個單詞的開頭和結尾。
    • 不同字型 不同單詞間距: 清晰的字間距 必須根據具體情況 來確定，因為不同的字型 有不同的 字元寬度。
      • 沒有一個值 可以確保所有字型 自動保持其易讀性。

20. white-space 屬性: 空白和換行的 處理

  • ⑴ 空白和換行的 處理: white-space 屬性
    • 設定如何處理 元素內的空白和換行。
    • 設定 建立佈局過程中 如何處理元素中的空白符。
      • 值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
  • ⑵ 空白/換行處理的 語法
    • white-space:normal|nowrap |pre|pre-line||pre-wrap| inherit;
/* 關鍵字值 Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* 全域性值 Global values */
white-space: inherit;
white-space: initial;
white-space: unset;
  • ⑶ 空白/換行處理的 屬性值
    • ① 瀏覽器 自動處理 (預設值): normal
      • 連續的空白符: 會被合併。
      • 換行符: 會被 當作空白符 來處理。
      • 填充行框 需要換行時，會換行。
    • ② 不換行: nowrap
      • 連續的空白符: 會被合併。
      • 文字內的換行: 無效,不換行。
        • 文字會在 同一行上顯示，直到遇到 換行 <br>標籤 為止。
    • ③ 保留空白/換行 = 預格式: pre
      • 連續的空白符: 會被保留。
      • 換行: 只在 遇到換行符 和 使用 <br>元素時 才會換行。
      • 行為方式: 類似 HTML 中的 預格式化 <pre> 標籤。
    • ④ 預格式+自動換行: pre-wrap
      • 保留 空白符序列，正常地 進行換行。
        • 連續的空白符: 會被保留。
        • 在 遇到 換行符, <br>元素，填充行框 需要換行時，會換行
    • ⑤ 保留換行+自動換行: pre-line
      • 合併 空白符序列，保留 換行符。
        • 連續的空白符: 會被合併。
        • 在 遇到 換行符, <br>元素，填充行框 需要換行時，會換行
    • ⑥ break-spaces
      • 與 pre-wrap的行為 相同，除了：
        • 任何保留的空白序列 總是佔用空間，包括 在行尾。
        • 每個 保留的空格字元后 都存在換行機會，包括 空格字元 之間。
        • 這樣保留的空間 佔用空間 而不會掛起，從而 影響盒子的 固有尺寸（最小內容大小 和 最大內容大小）。
    • ⑦ 繼承父親: inherit
      • 從父元素繼承 white-space 屬性的值。
  • ⑷ white-space 屬性值 之間的區別
屬性值換行空格和製表符自動換行行尾空格
normal合併合併自動換行刪除
nowrap合併合併不自動換行刪除
pre保留保留不自動換行保留
pre-wrap保留保留自動換行Hang
pre-line保留合併自動換行刪除
break-spaces保留保留自動換行Wrap 保留的空格字元后 都存在換行機會

  • ① 預設值 normal 和 nowrap 的區別

    • 都會合並 空格/製表符 和 換行
    • normal還可以 在文字需要換行時,自動換行, nowrap 則不可以自動換行,沒有<br /> 換行標籤,就只能是一行.

  • ② pre 和 pre-wrap的 區別

    • 都會保留 空格/製表符 和換行
    • 但 pre-wrap 增加了 自動換行, 可以 在文字需要換行時,自動換行, pre 則不可以.

  • ③ pre 和 pre-line的 區別

    • 都會 保留換行
    • pre-line 不保留空格,且增加了 自動換行

  • ④ 不換行 nowrap 和 預格式 pre的共同點

    • 都 不能自動換行

  • ⑸ 空白/換行處理的 瀏覽器支援

在這裡插入圖片描述

  • 範例1: 對一段文字中的 空白和換行 進行處理
  • css
.whitespace{
	width: 25%;
    background-color: #d0d0d0;
    padding: 10px;	
    border: solid black 2px;
    font-size: 1.1em;	

    white-space:normal;
    white-space:nowrap;
    white-space:pre;
    white-space:pre-wrap;
    white-space:pre-line;
    /*white-space:break-space;*/

}
  • html
    <p class="whitespace"> 
        <strong>                《題烏江亭》      </strong> 
                                唐代·杜牧 
        <b>勝敗兵家事不期，包羞忍恥是男兒。</b> 
        <b>江東子弟多才俊，捲土重來未可知。</b> 
        <br />
        譯文: 勝敗乃是兵家常事，難以事前預料。能夠忍辱負重，才是真正男兒。
        西楚霸王啊，江東子弟人才濟濟，若能重整旗鼓捲土殺回，楚漢相爭，誰輸誰贏還很難說。
    </p>
  • 預設樣式 = white-space:normal;
    • 在這裡插入圖片描述
不換行 white-space:nowrap;預格式 保留空格和換行 white-space:pre;
預格式+自動換行 white-space:pre-wrap;只保留換行+自動換行 white-space:pre-line;

（學習視訊分享：）

以上就是詳解CSS 文字屬性（Text）的詳細內容，更多請關注TW511.COM其它相關文章！