jquery - 文本显示：无 CSS？jQuery？

Question

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

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

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

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

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

我可以插入一些 jquery 代替吗？

score 6 · Accepted Answer

6

试试text-indent:-9999px。这应该将文本移到很远的左侧，使其脱离屏幕。

于 2013-05-22T04:04:32.690 回答

score 2 · Accepted Answer

你可以在它周围放一个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>');

快速解释什么

如果你担心的话，span里面的 alabel是“语义的” 。

score 2 · Accepted Answer

2

尝试

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

于 2013-05-22T04:10:00.593 回答

score 1 · Accepted Answer

当我有要隐藏的文本时，我更喜欢使用这种方法。

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

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

与常见的 -9999px 方法相比的优势： 由于不绘制 9999px 的框，因此性能显着提高。（是的，浏览器确实在旁边画了一个巨大的盒子。）

score 0 · Accepted Answer

0

font-size:0px;

这似乎可以解决问题，但不能完全确定您要达到的目标。

于 2013-05-22T04:08:19.860 回答

score 0 · Accepted Answer

试试这个，也许它会解决你的问题。

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

}

score 0 · Accepted Answer

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

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

7 回答 7