Question

我在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属性，因为边框必须可见。

Answer 1

您可以使用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; }
}

Answer 2

在所有图像替换技术中，有一些可以在不添加额外元素的情况下工作。如果希望它以内联方式显示，则所有这些都需要在跨度上设置宽度。

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

如果您需要支持旧版浏览器，则始终存在负文本缩进方法

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

在文档的打印版本中使文本不可见 - 避免颜色校正

CSS：

HTML：

2 个答案: