小智 35
每个人都在给你答案,但原因并不多.在这里你去:如果你使用CSS规则visibility:hidden;,文本区域将是不可见的,但它仍然会占用空间.如果你使用CSS规则display:none;,textarea将被隐藏,它不会在屏幕上保留空间 - 没有间隙,换句话说,它本来就是这样.下面的视觉示例.
所以你想要完全隐藏这样的东西:
<textarea cols="20" rows="20" style="display:none;">
Run Code Online (Sandbox Code Playgroud)
/* no styling should show up for either method */
textarea {
background: lightblue;
border: 1px solid blue;
font-weight: bold;
}Run Code Online (Sandbox Code Playgroud)
<p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.</textarea>
<p>Some text after.</p>
<hr />
<p><strong>Textarea with <code>display:none;</code></strong></p>
<textarea style="display:none;">Text within.</textarea>
<p>Some text after. Neither height nor margin/padding/layout kept. No other styles visible.</p>
<hr />
<p><strong>Textarea with <code>visibility:hidden;</code></strong></p>
<textarea style="visibility:hidden;">Text within.</textarea>
<p>Some text after. Height and margin/padding/layout kept. No other styles visible.</p>Run Code Online (Sandbox Code Playgroud)
你有几个选择,这里有一些例子:
以下是一些示例代码供您自己查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Area Hidden</title>
<style type="text/css">
.hideButTakeUpSpace
{
visibility: hidden;
}
.hideDontTakeUpSpace
{
display:none;
}
</style>
</head>
<body>
<h1>Text area hidden examples</h1>
<h2>Hide but take up space (notice the gap below)</h2>
<textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>
<h2>Hide Don't take up space</h2>
<textarea class="hideDontTakeUpSpace" rows="2" cols="20"></textarea>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
看到这个jsFiddle示例
| 归档时间: |
|
| 查看次数: |
65591 次 |
| 最近记录: |