我想让只读输入看起来像 CSS 的 pre 或 div 标签。
我本以为使用文本区域很容易做到，但它似乎是一项艰巨的任务。我可以隐藏边框和调整大小，但无论出于何种原因，我无法使文本区域的高度由其内容决定。
我见过很多关于使用 javascript 自动调整文本区域大小的内容，但是如果它是不需要 javascript 的静态文本，我能做些什么吗？
更新
我只是想澄清一下这样做的目的：我希望用javascript编写、重写，并使用表单提交单个只读元素，同时不将其限制在单个内联区域，这会强制，最好的情况是滚动，最坏的情况是数据丢失。
更新2
根据请求，我创建了一个小提琴来展示我正在尝试执行的操作的示例：http://jsfiddle.net/BUwdE/1/ .
textarea[readonly] {
width: 100%;
border: 0;
resize: none;
overflow: hidden;
}
您会看到内容在底部被截断，因为文本区域的高度不是由其内容决定的。
我实际上尝试做你一直在做的事情。但由于它将是一个“只读”输入，我实际上最终将 CSS 应用于 div 元素。这将是一个可以缓解我们头痛的 hack。
HTML
<div class="faketextarea"> some long long text </div>
.faketextarea {
// css of a text area
}
<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">
：
function auto_grow(){
var ts = document.getElementsByTagName('textarea')
for (i in Object.keys(ts)){
ts[i].style.height = "5px";
ts[i].style.height = (ts[i].scrollHeight+49)+"px";
}
}
textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
...
(properties for your needs)
}
<body onload='auto_grow()'>
<textarea>anytexts</textarea>
<textarea>texts 2</textarea>
</body>
区别在于我在 html
<body>标签上分配了 auto_grow() 函数，而不是
<textarea>