Html 如何使用CSS隐藏文本？

如何使用CSS（CSS3，如果需要）使

foo

不可见，同时保持

bar

和

fizz

可见

<table>
  <tr>
    <td>
      <textarea>bar</textarea>
      <input type='button' title='fizz' />
      foo
    </td>
  </tr>
</tbody>

酒吧
福

使用与背景相同的颜色制作

foo

是可以接受的，但技巧是-背景是图像，因此-

foo

必须是透明的，而不是纯色

JavaScript也不是一个选项

更改HTML也不是一个选项

---

有什么想法吗？

你需要把它放在像div一样的容器中，然后隐藏容器。

将

td

的大小设置为与

文本区域的大小相同（通过CSS
宽度
和
高度
），然后在TD上设置
overflow:hidden
，以便要隐藏的文本位于边界框之外？
编辑：Scott的更好。用他的

我认为一个合适的解决方案不会很好

td {
    position: relative;
    left: 9001px;
}

textarea {
    position: relative;
    right: 9001px;
}

哎呀。。。我应该更仔细地阅读这篇文章。我猜下面的方法终究行不通，因为更改html不是一个选项

在要隐藏的容器上设置css类（textarea？）：

“hidden”使元素消失（它实际上没有显示），但仍然会在文档流中被考虑，并占用通常会占用的空间。如果您希望它完全消失，并且对文档没有任何影响，那么请使用
display:none
建议的反面如何-

在TD上将溢出设置为
overflow:hidden
，将其大小固定在当前位置，并在
textarea
或
按钮上添加一个巨大的
填充底部
，如果您不必支持IE，则将文本设置为透明很容易：

table {
    background-color: cyan;
}
td {
    color: rgba(255,255,255,0);
}
td textarea, td input {
    color: #000;
}

这在IE8和Firefox（IE7）中运行良好，在单词上留下了小点，我想如果你将
字体颜色设置为与背景图像混合的颜色，它可能会很好。请注意，这不会影响
文本区域
或其中任何文本的
输入

td {font-size: 0;}

在编辑时添加

哇我是说，真的！这在IE7-8、Firefox和Safari上都奏效了

td {visibility: hidden}
td textarea,
td input {visibility: visible;}

作为旁注，我用
div
中包装的元素而不是一个表来测试它，我甚至在
div
中做了
div
，内部
div
显示，而其他内容则隐藏

显然，
可见性
属性作用于元素，并且（与
不透明度
不同）通过继承传播到子元素，因此，如果显式设置子元素
可见性
，它将不再继承
隐藏
，而是使用自己的
可见
设置，而包装是
隐藏
这一事实并不重要。
对不起……忘了提及也无法更改html。：）那可能有用。。。在
foo
前面有一个按钮。我猜它必须设置为显示：block，对吧（底部可能有一些填充）？如果你知道按钮的大小，你可以将其添加到TD的大小中（是的，将按钮设置为block，这样文本就会被压到下方）。你用“foo”表示的真实文本可以被识别吗？也就是说，你能在javascript中选择它吗？我知道你接受了另一个答案，但你必须检查我答案的第二部分，我不敢相信它会起作用！我正要发布同样的东西。好极了！但是当一个屏幕为12000像素的人出现时会发生什么呢？这也是我的解决方案，所以我会投票支持你。：-）这有帮助。现在事情看起来真的很奇妙。我只是想让你知道，我发现了一个更好的方法（见我答案的第二部分）@Justin，然后用一些JavaScript来包装文本并隐藏它。我不确定我们会很快看到12000像素的屏幕，到那时人们可能已经启用了JS。我不知道。用
位置固定：相对
。懒得结账。：）这是我模糊地想到的，但我认为不能将子元素可视化。我想你可以。。。
td {font-size: 0;}

td {visibility: hidden}
td textarea,
td input {visibility: visible;}