插入換行符

通過 CSS 來插入換行的需求在越來越多的場景中運用到，例如我們使用定義列表來呈現一行行的名值對，例如下面一段代碼：

<dl>
    <dt>Name:</dt>
    <dd>John</dd>

    <dt>Email:</dt>
    <dd>[e-mail]</dd>

    <dt>Sex:</dt>
    <dd>male</dd>
</dl>

我期望達到下面的效果：

我依次做了下面的嘗試：

1. 在每一個 <dd> 后面添加了一個 <br> ，讓他們換行，可效果卻是這樣的：

查找資料我明白了，<dd> 本來是塊級元素，並且占有一定的外邊距，它們默認情況下不能同占一行。

2. 我添加了一些樣式：

dd {
    margin: 0;
    font-weight: bold;
}
dt, dd {
    display: inline;
}

嗯，還不錯，才進行兩步就滿足了我的要求，我效率也太高了吧。

——扯淡，寫成這樣還好意思說。（不僅僅污染了結構層的代碼，而且在可維護方面也是一種糟糕的實踐）

 

於是我想嘗試一種不加入 <br> 這種額外的標簽就能達到我想要的效果的方法。

一、添加生成內容

有一個 Unicode 字符是專門代表換行符的：0x000A。在 CSS 中可以使用 "\000A"， 或者簡化成 "\A"。可以使用它來作為偽元素 ::after 的生成內容，把它添加到 <dd> 元素的后面：

dd::after {
  content: "\A" ;
}

不過，這段 CSS 代碼想當於在 HTML 結構中的所有關閉標簽 </dd> 之前添加換行符。添加的空白符會和其他相鄰的空白符進行合並（我們輸入很多空白符，只相當於輸入了一個空白符！）。當然我們這里需要保留這些空白符和換行，可以用 white-space: pre; 。不過這里只針對偽元素生成的換行符設置這個樣式。

二、對生成內容設置樣式，保留源代碼中的這些換行和空白符

dt, dd {
  display: inline;  
}
dd {
  margin: 0;
  font-weight: bold;    
}
dd::after {
  content: "\A";  
  white-space: pre;  
}

至此我們完成了我們的需求，而不加任何 <br />。

 

可是這樣的代碼有這樣的問題，如果我們某一個定義項有多個內容，即一個 <dl> 中有多個 <dd> ，具體到該項目中，該用戶有兩個郵箱：[e-mail] 和 [e-mail]，那么我們得到的效果會是：

看起來 [e-mail] 又是一個定義列表，且沒有標題。

更改一、既然如此，我們可以將換行符加載 <dt> 前面，並且 <dt> 前面要有 <dd>：

dd + dt::before {
  content: "\A";  
  white-space: pre;  
}

更改二、多個 <dd> 之間用 ", " 分割：

dd + dd::before {
  content: ", ";
  font-weight: normal;
}

全部的代碼：

dt, dd {
  display: inline;  
}
dd {
  margin: 0;
  font-weight: bold;    
}
dd + dt::before {
  content: "\A";  
  white-space: pre;  
}
dd + dd::before {
  content: ", ";
  font-weight: normal;
}

 

擴展：以后 <hgroup> 里面有 <h2> , <h3> 等，並且 <h2> 和 <h3> 的寬度需要根據文本的長度進行調整，而不是 100%，那么就需要將其設置為 display: inline-block; 這樣的情況下， <h2> 和 <h3> 之間需要插入換行符，便可以通過這種方式實現了。