为什么有时显示背景而有时不显示背景？

debugcn 发表于 Dev

大耳

我有强调某些单词的CSS。
后来我发现它没有出现在空间中。
我发现在示例HTML上，下划线显示在上方example，但不显示在下方 example。
为什么下面的空格没有下划线？

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .correct-line {
        background: linear-gradient(transparent 55%, rgb(10, 150, 126) 60%);
      }
    </style>
  </head>
  <body>
    <p>example<span class="correct-line"> </span>example</p>
    <hr />
    <div>
      example
      <span class="correct-line"> </span>example
    </div>
  </body>
</html>

用户名

这是因为CSS将多个空格处理为单个空格，换行符后的空格都被视为空格，因此减少为单个空格并删除了第二个空格。对比下面的代码。

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .correct-line {
        background: linear-gradient(transparent 55%, rgb(10, 150, 126) 60%);
      }
    </style>
  </head>
  <body>
    <p>example<span class="correct-line"> </span>example</p>
    <hr />
    <div>
      example<span class="correct-line"> </span>
example
    </div>
  </body>
</html>

另请查看https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace了解更多信息。

您可以使用 仅是您插入的数据，但大概是来自其他来源的数据

您最好使用white-space：pre; 如下

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .correct-line {
        background: linear-gradient(transparent 55%, rgb(10, 150, 126) 60%);
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <p>example<span class="correct-line"> </span>example</p>
    <hr />
    <div>
      example
      <span class="correct-line"> </span>example
    </div>
    <div>
      example<span class="correct-line">
       </span>example
    </div>
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。