IT工程師數位筆記本

有時我們想在一行內顯示一個標題，以及一段內容，雖然看起來比較簡單，但是為了語義化用dl比較合適，但是它默認是block元素，改成inline？那么有多段呢？不就都跑上來了？用float？那問題也挺多。

就是這種效果

當然如果不需要語義化那是很簡單的事，但我現在就想用dl>dt+dd。那么display:run-in就派上用場了。

display:run-in 會根據后面的元素進行轉換display為inline | inlin-block | block

如果它后一個元素是block那么它會變成inline并且神奇的是它會和后一個元素并排。

如果它后一個元素是inline那么它會變成block。

如果它后一個元素是inline-block，它還是正常的顯示。

最有價值的估計就是第一種情況了，但可惜的是Chrome從32版本開始將這個屬性移除了，話說要是Chrome沒有移除這個屬性兼容性還是比較不錯的。

話說為什么要移除這個屬性？我們來看看stackoverflow里面的一段話。

I'm not aware of any change to Chrome's support of display:run-in but the setting has always seemed unloved

意思好像是說，display:run-in不怎么受歡迎。

Hixie has been consistently opposed to and I kind of understand why. HTML is a semantic language and the semantics are fully defined by dl/dt/dd. The only practical problems are presentational, and that makes it a CSS problem, not an HTML one.

Hixie 說HTML是一種語義語言，而display:run-in破壞了，準確的說我們上面的問題不是HTML的問題而是CSS的問題。它是意思應該是display:run-in沒有必要，完全可以通過其他方式實現。

這里有一個解決方法可以解決我們的第一個問題。

display: run-in dropped in Chrome?

但是里面沒有說特別清楚，我來解釋一下吧。

代碼如下：

<style>
  dt,dd{
    display:inline;
  }
  dt {
    font-weight: bold;
  }
  dt:after {
    content: ": ";
  }
  dd {
    margin:0;
  }
  dd:after {
    content:'\0A';
    white-space:pre-wrap;
  }
</style>
<dl>
  <dt>這是什么？</dt>
  <dd>這是一本神奇的書。</dd>
  <dt>這是什么？</dt>
  <dd>這是一部神奇的電影。</dd>
</dl>

首先我們把所有的元素變成inline在一行顯示，但問題就是所有的都一行顯示了，所有這里用了一點小技巧，就是這段代碼。

dd:after {
  content:'\0A';
  white-space:pre-wrap;
}

很神奇對吧，其實按理說只有寫上content:'\0A'這句話就好了的，\0A表示換行，但為什么還要加上white-space:pre-wrap;?因為瀏覽器默認對文本的換行是忽略的，比如HTML里面的空白字符之類的。除了使用pre-wrap還可以使用其他的，只要不是nowrap就好了。更多關于white-space可以看CSS white-space 屬性

但還是有個小問題，如果有多個dd的話，就換行了。

會出現這個問題，完全是我們考慮的不周全，換行應該加給“dt”。

<style>
  dt,dd{
    display:inline;
  }
  dt {
    font-weight: bold;
  }
  dt::after {
    content: ": ";
  }
  dt::before{
    content:"\0A";
    white-space:pre;
  }
  dd {
    margin:0;
  }
</style>
<dl>
  <dt>這是什么？</dt>
  <dd>這是一本神奇的書。</dd>
  <dd>這是一本神奇的書。</dd>
  <dt>這是什么？</dt>
  <dd>這是一部神奇的電影。</dd>
</dl>

但你有沒有發現有個問題啊？就是第一個dt是不用換行的。

加上這個就OK了

dt:first-of-type::before{
  content:'';
}

這里說一下里面的“\0A”是ASCII碼，如果想了解更多ASCII碼，可以看ASCII碼表

今天學到的還是很多的，倒不是這個"display:run-in"而是在content中使用ASCII。