SedationH Avatar

HTML空白符问题

Published on September 14, 2024
View on GitHub

https://blog.dwac.dev/posts/html-whitespace/#html-whitespace-is-broken https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace https://stackoverflow.com/a/12747850/13508672 https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace MDN 关于这个问题写的很清晰 看 Explanation 描述了下解析规则分为两块 inline formatting contexts block formatting contexts

样式问题 

HTML
.people-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* font-size: 0; */
}

.people-list li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #f06;
  border: 1px solid;
}

    <ul class="people-list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

做 DOM 操作的时候小心 whitespace node 工具方法

white-space 可通过 css 的方式控制这个 whitespace 的处理表现 真的想在 HTML 写空格 用 &nbsp;