ol/ul中的额外换行

一般来说 ol/ul元素会这样呈现

  <div>
    title
    <ol>
      <li>Fee</li>
      <li>Fi</li>
      <li>Fo</li>
      <li>Fum</li>
    </ol>
  </div>

但如果同时使用white-space:pre就会这样(这里是pre-line,对换行的处理是一样的)

  <div class=" whitespace-pre-line">
    title
    <ol>
      <li>Fee</li>
      <li>Fi</li>
      <li>Fo</li>
      <li>Fum</li>
    </ol>
  </div>

这种现象可以理解为ol会在开头、结尾和每个li间加换行
解决方法

  ol,
  ul {
    white-space: normal;
    li {
      white-space: pre-line;
    }
  }