1

我在 html 中有一个简单的“填补空白”练习。有差距，看起来像这样：

地球最近的恒星是_ _ _ _。

这些间隙不应该在计算机上填充 - 文档应该以空白打印。但是它们有一个内容，因此，当它们出现时，可以检查答案。
我使用border-bottom 属性来弥补差距。空白处填充了一个文本，但它是白色的，因此用户只能在悬停时看到它。

CSS：

span.gap {
    color: white;
    border-bottom: 1px solid black;
}
span.gap:hover {
    color: gray;

}

的HTML：

Stephen Hawking is famous for his research of <span class="gap">black holes</span>.
Stackoverflow only helps you if you ask <span class="gap">simple questions</span>.

浏览器似乎将颜色从白色固定为黑色，因此在打印文档中可以看到间隙内容。那我应该如何隐藏文字呢？
我不能使用该visibility属性，因为边框必须可见。

4

2 回答 2

0

您可以使用 CSS 媒体类型来处理不同的显示/媒体情况。即在您的 CSS 中添加类似这样的内容：

@media print { .gap { /* add your styles */ }}

此外，结合这一点，您可以添加一个span仅用于打印的单独显示。像：

HTML：

Stackoverflow only helps you if you ask 
<span class="gap">simple questions</span>
<span class="print-gap"></span>.

CSS：

span.gap, span.print-gap {
    color: white;
    border-bottom: 1px solid black;
}
span.gap:hover {
    color: gray;
}
@media screen {
    span.print-gap { display: none; }
}
@media print { 
    span.gap { display: none; } 
    span.print-gap { display: inline-block; width: 100px; }
}
于 2013-04-08T20:21:05.317 回答
0

在所有图像替换技术中，有一些无需添加额外元素即可工作。如果您希望跨度显示为内联，所有这些都需要在跨度上设置宽度。

http://jsfiddle.net/TZD84/

span.gap {
    display: inline-block;
    width: 8em;
    white-space: pre;
    overflow: hidden;
    border-bottom: 1px solid black;
    text-indent: 110%;
}

span.gap:hover {
    color: gray;
    text-indent: 0;
}

如果你需要支持旧版浏览器，总有否定的 text-indent 方法

http://jsfiddle.net/TZD84/1/

span.gap {
    display: inline-block;
    width: 8em;
    overflow: hidden;
    border-bottom: 1px solid black;
    text-indent: -10em;
}

span.gap:hover {
    color: gray;
    text-indent: 0;
}
于 2013-04-08T21:19:47.053 回答