如何使用CSS隐藏文字？

如何使foo隐藏使用CSS（CSS3如果需要），同时保持bar和fizz可见？如何使用CSS隐藏文字？

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

在相同的颜色作为背景制作foo是可接受的，但关键是 - 背景是图像，因此 - foo必须是透明的，而不是纯色。

JavaScript也不是一个选项。

更改HTML也不是一个选项。

任何想法？

来源

2010-07-23 Arnis Lapsa

您用“foo”表示的真实文字是否可以识别？也就是说，你可以在JavaScript中选择它吗？ – DOK 2010-07-23 17:00:53

我知道你接受了另一个答案，但你必须检查我的答案的第二部分，我不能相信它的工作！ – ScottS 2010-07-23 17:34:22

编辑：斯科特的更好。用他的。

我不认为一个适当的解决方案将是漂亮的。

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

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

来源

2010-07-23 17:00:10

我刚刚发布了相同的内容。好样的！ – mattbasta 2010-07-23 17:01:56

但是，当有人出现时，会发生什么情况，具有12000像素的屏幕？这将是我的解决方案，所以我会给你投票。 :-) – Justin 2010-07-23 17:11:28

它有帮助。事情现在看起来很真实。 – 2010-07-23 17:16:56

你需要把它放在一个容器内像DIV然后隐藏容器..

来源

2010-07-23 16:57:36 dejavu

对不起...忘了提及，不能改变html。 :) – 2010-07-23 16:58:25

设置td的大小（通过CSS width和height）是相同textarea的大小，然后在TD上设置overflow: hidden，以便您要隐藏的文本在边界框之外？

来源

2010-07-23 16:58:12 Amber

这可能会奏效......'foo'之前有按钮。我想它必须设置为显示：块，正确（一些填充底部也许）？ – 2010-07-23 17:00:04

不...我猜这不会按钮的原因。 – 2010-07-23 17:00:52

如果知道按钮的大小，可以将其添加到TD的大小（并且是，将按钮设置为阻止，以便将文本压低到下面）。 – Amber 2010-07-23 17:11:20

哎呦......应该更仔细地阅读OP。猜猜以下将不会工作，因为更改html不是一个选项。

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

... 
    <textarea class="hideme">bar</textarea> 
...

和下面的CSS：

.hideme { 
    display: hidden; 
}

'隐藏' 使该元素消失（这是字面上没有显示），但仍然在文档流程中占据并占据了它通常的空间。如果你想让它真的消失并且对文档没有任何影响，请使用display: none。

来源

2010-07-23 17:01:27

如何Amber's建议的相反 -

设置溢出overflow: hidden对TD，固定大小的地方是，现在和在textarea或button添加了巨大的padding-bottom。

来源

2010-07-23 17:04:58 aronchick

不知道。以'position：relative'固定。懒得退房。 :) – 2010-07-23 17:17:43

如果没有支持IE，则文本设置为透明很简单：

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

来源

2010-07-23 17:18:51 robertc

这在IE8和Firefox的罚款（IE7离开的话小点，我想如果你设置font-color与背景图像混合的东西，它可能没有问题。请注意，这不会影响text-area或input中的任何文本。

td {font-size: 0;}

加在编辑

WOW我的意思是，真的！这个工作对IE7-8，Firefox和Safari

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

作为一个方面说明，我裹在div元素，而不是一台测试这一点，我甚至在div一个div和内div节目而其他内容被隐藏。

显然，visibility财产行为的元素，和（不像opacity）传播到通过继承的子元素，因此，如果我们明确地设置了一个子元素visibility它不再继承hidden但使用它自己的visible设置而包装是hidden的事实并不重要。

来源

2010-07-23 17:22:42 ScottS

这隐约是我想到的，但我推断你不能重新看到子元素。我想你可以... – strager 2010-07-23 17:42:43

如何使用CSS隐藏文字？

回答

相关问题