CSS單行詳解

當人們提起 CSS（層疊樣式表）時，第一件事想到的往往是文本格式、布局和圖像處理。而CSS中關於單行的應用也是一樣不可忽視的，它們可以控制一些微小但關鍵的樣式細節。下面，我們將從多個方面對CSS單行進行詳細的探究。

一、字間距調整

CSS單行提供了很多方法可以控制字間距。例如，word-spacing屬性可以增加或減少單詞之間的空格。當我們需要應用於整個段落時，可以通過選擇器來完成：

p {
  word-spacing: 3px;
}

此外，可以使用letter-spacing來改變字元之間的距離，例如：

h1 {
  letter-spacing: 2px;
}

二、行高

CSS單行中的另一個要素是行高。行高不僅可以改變文本在行內的垂直位置，還可以影響文本的可讀性。

通過line-height屬性來設置行高，例如：

h1 {
  line-height: 1.5;
}

這會將行高設置為當前字體大小的1.5倍。此外，line-height也可以使用像素和em單位。

三、文本溢出

當元素中的文本超過指定寬度或高度時，會發生文本溢出。此時可以用一些CSS屬性來控制文本的溢出，使其更加美觀。

其中，text-overflow屬性可以設置文本的溢出情況。在下面的例子中，當文本溢出時，會以”…”結尾：

h1 {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: nowrap可以防止文本在空格處折行；overflow: hidden隱藏了溢出的部分；而text-overflow: ellipsis在結尾處添加了省略號。

四、文本對齊

CSS單行還可以用來控制文本的對齊方式。在常規情況下，文本會向左對齊。可以通過text-align屬性來設置文本對齊方式，例如：

h1 {
  text-align: center;
}

這將把文本居中對齊。此屬性還支持left、right和justify等取值。

五、文本變換

CSS提供了多種文本變換方式。例如，text-transform屬性可以將文本轉換為大寫、小寫、首字母大寫或無任何變化。可以如下使用：

h1 {
  text-transform: uppercase;
}

此外還可以使用text-decoration屬性為文本添加下劃線、刪除線、加粗等效果，例如：

a {
  text-decoration: none;
  font-weight: bold;
}

六、文本陰影

通過CSS單行的text-shadow屬性，可以為文本添加陰影。可以如下使用：

h1 {
  text-shadow: 1px 1px 2px #000000;
}

這將為文本添加一個位置在右下方的陰影，陰影的大小為2px，顏色為黑色。

七、縮放文本

CSS單行可以通過font-size屬性來設置文本大小，但這並不是唯一的方法。另一個有用的方法是縮放文本，可以使用transform屬性來完成，例如：

h1 {
  transform: scale(0.8);
}

這會將文本縮小到80%的大小。此屬性還支持旋轉、傾斜等多種變換。

總結

CSS單行雖然看似無足輕重，但實際上卻是一個不可忽視的細節。從調整字間距、設置行高、控制文本溢出、變換文本樣式、設置文本陰影到縮放文本，CSS單行有眾多用途，可以極大地豐富網頁設計的效果。