文字显示：无CSS？ jQuery的？

Question

<label><input type="radio">TextmakesNoSense</label>

所以这个动态生成的内容是只读的......所以我想......

label {
    color:#fff;
    font-size:0.0001em;
}

在一个白色背景的网页上，但对我来说似乎非常狡猾，如果你突出显示按钮，你仍然可以在某些浏览器上看到那里有文字。

所以你认为新版本的CSS会包含“text-display：none;” ？

我可以插入一些jquery吗？

Answer 1

试试text-indent:-9999px。这应该将文本向左移动到远离屏幕的位置。

Answer 2

您可以在其周围添加span标记：

<label><input type="radio"><span class="ro-text">TextmakesNoSense</span></label>

CSS：

.ro-text {
    visibility: hidden;
}

或者

.ro-text {
    display: none;
}

取决于你想要完成的任务。

如果需要动态添加范围，请使用此jQuery：

$('label').html($('label').find('input')[0].outerHTML + '<span class="ro-text">'+$('label').text()+'</span>');

快速解释

http://jsfiddle.net/Cwalkdawg/h5kYQ/2/

span内的label "semantic"是{{3}}，以防您担心。

Answer 3

尝试

label {
    color:#fff;
    font-size:0.0001em;
    text-indent:-9999px;
}

Answer 4

font-size:0px;

这似乎可以解决问题，但并不完全确定你想要实现的目标。

Answer 5

试试这个，可能会解决你的问题。

label {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    overflow: hidden;

}

Answer 6

当我要隐藏文字时，我更喜欢使用此方法。

.label {
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.0001em
}

一般优势： 真正长的文本字符串永远不会流入容器，因为它们总是从容器中流出。

优于常见的-9999px方法的优势： 性能得到显着提高，因为未绘制9999px的盒子。 （是的，浏览器确实吸引了大量的一面。）

参考文献： Website Article

Answer 7

如上所述font-size:0是选项之一。但有时会弄乱文本容器的尺寸或大小。我正在使用另一种技巧，除了文本，它不会改变任何其他内容，只是通过alpha通道-0设置字体颜色。

.label{
color: rgba(0,0,0,0);
}