使只读文本区域的高度由其内容决定

Question

我想让只读输入看起来像 CSS 的 pre 或 div 标签。

我本以为使用文本区域很容易做到，但这似乎是一项艰巨的任务。我可以隐藏边框和调整大小，但无论出于何种原因，我无法使文本区域的高度由其内容决定。

我见过很多关于使用 javascript 自动调整文本区域大小的内容，但是如果它是不需要 javascript 的静态文本，我能做些什么吗？

更新

我只是想澄清一下这样做的目的：我希望用 javascript 编写、重写，并使用表单提交单个只读元素，同时不将其限制在单个内联区域中，从而强制，最好的情况是滚动，最坏的情况是数据丢失。

更新2

根据请求，我创建了一个小提琴来展示我想要做的事情的示例： http: //jsfiddle.net/BUwdE/1/。

textarea[readonly] {
    width: 100%;
    border: 0;
    resize: none;
    overflow: hidden;
}

您会看到内容在底部被截断，因为文本区域的高度不是由其内容决定的。

Answer 1

您可以使用 rows 属性指定 HTML 中文本区域的高度，但这不会自动调整大小。您可能需要向 W3C CSS 工作组求助才能得到您想要的东西。

<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">