我需要使用文本区域来显示一些文本。问题是，如果我放置 4-5 行文本，则会出现滚动条。如何使用 CSS/HTML 以使 textarea 与其内容一样大（无滚动条）。
textarea 不需要动态改变它的大小，我只用它来显示文本（我也可以使用禁用的 textarea）
我希望文本区域仅垂直拉伸。
如果你想知道：
我使用 textarea 显示数据库中的一些文本，因此当创建 textarea（其中包含文本）时，它应该立即显示整个文本，没有滚动条。
【问题讨论】：
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow-y: auto;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init (maxH) {
var text = document.getElementById('text');
var maxHeight=maxH;
var oldHeight= text.scrollHeight;
var newHeight;
function resize () {
text.style.height = 'auto';
newHeight= text.scrollHeight;
if(newHeight>oldHeight && newHeight>maxHeight )
{
text.style.height=oldHeight+'px';
}
else{
text.style.height = newHeight+'px';
oldHeight= text.scrollHeight;
}
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>
【讨论】：
恐怕您将不得不求助于 javascript 来设置文本区域的高度。您可以使用scrollHeight 属性来确定总高度。
或者，您可以只使用div 并将div 设置为看起来像文本区域。 div 会自动增长，因为它是一个禁用的文本区域，所以你并不需要它成为一个文本区域。
【讨论】：
好的，我刚刚发现了这个，效果很好：
<html>
<head>
<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
</body>
</html>
现在，我不应该假设您知道 Javascript（但您可能会）。
直接跑吧
textAreaAdjust(document.getElementById("id of your text area"))
类似的东西应该可以。我在 Javascript 方面不是最好的（甚至没有接近，我前几天才开始使用它）
这似乎与您想要的类似。第一个代码示例是一个文本区域，它根据其中的内容（在键入时）动态变化。需要进行几次更改才能获得您想要的效果。
【讨论】：
您可以使用 CSS 的 height: 和 width: 属性，例如。 G。就像是
<textarea style="width:400px;height:300px">...</textarea>，使用你想要的尺寸即可。
另外，如果要抑制滚动条，请使用overflow:hidden。
【讨论】：
你可以像 textarea 一样使用 div。可能是这样的：
<div contenteditable="true" style="width:250px; border:1px solid #777" ></div
【讨论】：
找出最有可能显示它的字体的高度。我不确定 CSS/HTML，但您可以使用 Javascript/PHP/ASP.net 来使用 map 来确定文本的大小关于字符数。如果你使用等宽字体，这会更容易。当你可以使用一个标签来做同样的事情时，为什么还要使用一个文本区域呢？
【讨论】：
如果您不介意使用 JavaScript，您可以使用以下文章之一中的方法： http://james.padolsey.com/javascript/jquery-plugin-autoresize/ http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/
但根据您的要求，我假设您想要纯 CSS 解决方案。 然后你可以使用简单的 div 和下面的 css 来模仿 textarea 的外观（如果你只想显示文本）：
div {
cursor: text;
background: lightGray;
border: 1px solid gray;
font-family: monospace;
padding: 2px 0px 0px 2px;
}
【讨论】：
我假设没有使用name 属性。您可以使用此替代方法 (HTML5)：
【讨论】：
现在使用resize property 有效：
调整大小：无；
【讨论】：