Question

下划线的长度应与文本内容相对应。我遇到了另一个类似的问题，其中接受的解决方案是使用

.doubleUnderline {
text-decoration:underline;
border-bottom: 1px solid #000;
}

但这不是我想要的。我希望双下划线的长度等于文本内容的长度。

Answer 1

我鞭打了两个例子。

使用块元素（例如p），您可以使用inline-block，因此它不会覆盖整个页面而只会显示文本。

span{
  border-bottom:1px solid #000;
  text-decoration:underline;
}
        
p{
  border-bottom:1px solid #000;
  text-decoration:underline;
  display:inline-block;
}

<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>

Answer 2

试试这个：

<td> 
  <span style="border-bottom:double black;">
    Grand Total : ###,###,###.00
  </span>
</td>

希望这对你有用：）

ps：如果你需要调整宽度至少使用3px。否则它不会显示为双下划线

Answer 3

CSS3中有一条提议的text-decoration-style规则，其值为＆＃34; double＆＃34;，但在浏览器中尚不支持。

＆＃13;

.example { 
    text-decoration-line: underline;
    text-decoration-style: double;
}

＆＃13;

<p class="example">This is how it looks</p>

＆＃13;

如何在html表格单元格中双重加下划线？

3 个答案: