如何用上划线和下划线包裹整行，直到行尾？

Question

我尝试下划线并在一行上划线直到该行的结尾，但此CSS代码

            .statistics_lines {
                text-decoration: overline underline;
            }

仅标记下划线＆amp;仅限于单词。

如何强制整行用下划线加下划线？

就像那样：

Answer 1

使用text-decoration没有办法，因为该样式是添加到该元素的文本的装饰。你可以使用多个空格（ ），但它很邋and，并且不会总是元素的宽度。

由于我们讨论的是一行，您可以使用元素的border来获取您想要的内容。如果元素为inline，则需要更改其display样式。

我还添加了padding：

＆＃13;

＆＃13;

.statistics_lines {
    display:block;
    border-top:1px solid #DDD;
    border-bottom:1px solid #CCC;
    padding:7px 4px;
}

＆＃13;

<span class='statistics_lines'>this is my line</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

改用边框。像这样：

.element {
  border-bottom: 1px solid #eee;
}

<div class="element">This is a test</div>

您可以“玩”它以获得您想要的任何风格。示例：

.element {
  border-bottom: 1px dotted #888;
  padding: 15px 0;
}

<div class="element">This is a test</div>

Answer 3

如果您正在讨论单行，那么您可以使用border-top和border-bottom属性。

但是如果你在讨论多行句子，那么你可以使用宽度仅为1px的背景，高度将是你的段落的行高，背景应该重复，然后你会看到确切的你想要什么。

Answer 4

由于text-decoration的效果仅适用于元素的文本内容，因此使它们在可用宽度上延伸的唯一方法是使内容变宽。这可以通过JavaScript代码完成，该代码在超出宽度之前附加无间隔空格，然后追溯一个空格。在纯CSS中，您需要使用一长串不间断空格（希望它就足够了）作为生成内容并抑制溢出：

.statistics_lines {
  text-decoration: overline underline;
  white-space: nowrap;
  overflow: hidden;
}
.statistics_lines:after {
  content: "\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}

<div class=statistics_lines>this is my line</div>

由于上划线和下划线在很多方面都与字母字形太接近，因此最好使用上边框和下边框，如其他答案所示。