从display:run-in;中学习新技能

有时我们想在一行内显示一个标题，以及一段内容，虽然看起来比较简单，但是为了语义化用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。