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

Question

在带下划线的元素中使用字间距时，如果元素包含跨度，则空格没有正确下划线，使其非常难看......

有解决办法吗？

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>

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

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

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

score 1 · Accepted Answer

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

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

span:not(:last-child)::after {
  content:"\00a0";
}

<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>

score 1 · Accepted Answer

正在寻找正确的解决方法...

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

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>

另一个解决方法是在 mix:中添加一个零宽度空间 ，但是您可以看到，由于 显示和下划线，下划线现在在文本之前或之后延伸：

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>

✨ 空间 + 零宽度空间来拯救

看起来我们到了某个地方......因为我们不希望 它在行尾或行首时显示，让我们使用普通空格和零宽度空格：：

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 元素来获得额外的下划线自定义/样式选项

另一种选择是使用包装元素使用 aborder或 a创建下划线box-shadow，这还允许您拥有一些额外的自定义/样式选项，如您在这些示例中所见：

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>

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

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

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

2 回答 2

正在寻找正确的解决方法...

✨ 空间 + 零宽度空间来拯救

使用额外的 HTML 元素来获得额外的下划线自定义/样式选项

Related

Reference