在设置了字间距的段落下划线

Question

在带下划线的元素中使用字间距时，如果元素包含 span，spaces 没有正确加下划线，这使得它非常难看...

有解决办法吗？

p {
  text-decoration: underline;
  word-spacing: 1em;
}

<p>
  <span>test</span> <span>test</span>
</p>
<p>
  test test
</p>

编辑：

我发现这个技巧几乎可以满足我的用例：

p {
  text-decoration-line: underline;
}
span:after {
  content: ' ';
  letter-spacing: 1em;
}

<p>
  <span>test</span>
  <span>test</span>
</p>

问题是我想将它与零宽度 space 一起使用，例如 \u200B，但由于某种原因，它不起作用。也许我做错了...

p {
  text-decoration-line: underline;
}
span:after {
  content: '0B';
  letter-spacing: 1em;
}

<p>
  <span>test</span>
  <span>test</span>
</p>

Answer 1

解决方法是删除跨度之间的白色 space，并使用带有伪元素的 hack 来模拟 word-spacing。它有效，但它仍然是一个 hacky 解决方案：

p {
  text-decoration: underline;
  word-spacing: 1em;
  display:flex; /*remove white space*/
}

span:not(:last-child)::after {
  content:"[=10=]a0";
}

<p>
  <span>test</span> <span>test</span>
</p>
<p>
  test test
</p>

如果你只有跨度，你可以这样做：

p {
  text-decoration: underline;
}

span:not(:last-child)::after {
  content:" ";
  letter-spacing: 1em;
}

<p>
  <span>test</span> <span>test</span>
</p>

Answer 2

正在寻找合适的解决方法...

解决 Chrome 中问题的快速解决方法是将 space 替换为  ，但这仅适用于单行文本。如果文本不适合单行，它将溢出父元素而不是分成多行：

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&nbsp;<span>test</span>
</p>

<p>
  <span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>
</p>

另一种解决方法是在混合中添加 zero-width space： ，但您可以看到由于 [=18]，下划线现在延伸到文本之前或之后=] 也被显示和下划线：

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>
</p>

<p>
  <span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>
</p>

✨ Space + 零宽度 Space 拯救

看起来我们正在取得进展...因为我们不希望   在行尾或行首时显示，让我们使用正常的 space和一个零宽度 space: :

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&#8203; <span>test</span>
</p>

<p>
  <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>
</p>

使用额外的 HTML 元素来获得额外的下划线 customization/styling 选项

另一种选择是使用环绕元素使用 border 或 box-shadow 创建下划线，这也允许您有一些额外的 customization/styling 选项，因为您可以在这些例子中看到：

p {
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
  float: left;
  box-sizing: border-box;
}

p:nth-child(3n) {
  border: none;
}

.fakeUnderline1 {
  border-bottom: 2px solid black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline1:hover {
  border-bottom-color: cyan;
}

.fakeUnderline2 {
  border-bottom: 1px solid black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline2:hover {
  border-bottom-width: 3px;
}

.fakeUnderline3 {
  box-shadow: inset 0 -2px 0 0 yellow;
  transition: box-shadow ease-in 75ms;
}

.fakeUnderline3:hover {
  box-shadow: inset 0 -16px 0 0 yellow;
}

.fakeUnderline4 {
  overflow: hidden;
  box-shadow: 0 2px 2px -3px red;
  transition: box-shadow ease-in 75ms;
}

.fakeUnderline4:hover {
  box-shadow: 0 5px 5px -5px red;
}

.fakeUnderline5 {
  border-bottom: 1px dotted black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline5:hover {
  border-bottom-style: solid;
}

.fakeUnderline6 {
  border-bottom: 2px solid blue;
  box-shadow: inset 0 -2px 0 0 red;
}

.fakeUnderline6:hover {
  border-bottom-color: red;
  box-shadow: inset 0 -2px 0 0 blue;
}

.fakeUnderline7 {
  text-decoration: underline;
}

<p>
  <span class="fakeUnderline1">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline2">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline3">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline4">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline5">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline6">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

即使问题不是关于下划线样式，请注意，如果您只需要一些基本的下划线样式选项并且浏览器支持不是问题，您可以使用这些属性而不是上面的解决方案：

一旦支持这些实验性功能，将可以使用更复杂的行为：

在设置了字间距的段落下划线

underline a paragraph having word-spacing set

html

css

google-chrome

word-spacing

正在寻找合适的解决方法...

✨ Space + 零宽度 Space 拯救

使用额外的 HTML 元素来获得额外的下划线 customization/styling 选项