为设置了字距的段落添加下划线

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>

Answer 1

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

p {
text-decoration: underline;
word-spacing: 1em;
display:flex; /*remove white space*/
}
span:not(:last-child)::after {
content:"0a0";
}

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

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>

另一种解决方法是同时在混合中添加一个零宽度的空格： ​，但您可以看到，由于显示和下划线 ，下划线现在延伸到文本之前或之后：

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 元素获取其他下划线自定义/样式选项

另一种选择是使用包装元素通过border或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>

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

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-underline-position

一旦支持这些实验性功能，将提供更复杂的行为：

• text-decoration-skip
• text-decoration-skip-ink