html - 如何创建高度增加以适合文本的文本区域？

Question

我目前正在尝试创建文本区域来以剧本格式显示对话。到目前为止，我想出了这个:

<textarea style="width: 140pt; border: 0px; resize: none; overflow:hidden;">

我试过添加像 height: auto; 这样的东西, overflow: auto;或者只是完全删除高度(正如我在上面的代码中所做的那样)——但这没有用。我想要它做的就是增加文本区域的高度，使其适合其文本，同时将宽度保持在 140pt。我应该怎么做？

谢谢，J

Answer 1

如果您只是想让您的剧本文本以保留多个空格的等宽字体显示，您最好使用将 white-space:pre 分配给的不同元素它:

HTML

<div class="screenplay">
EXT. FOREST / ELSEWHERE - DAY

Susan is on a cell-phone call. She smiles at Melissa, who walks by with two cups of coffee.

                        SUSAN (V.O.)
            Right now, this is probably our top pilot. But things change.
</div>

CSS

.screenplay {
    white-space: pre;
    font-family: monospace;
}

参见 http://jsfiddle.net/GhMjq/

但是，您可能还想看一下 Fountain Scrippets plugin 的输出.我相信这会以合理的 HTML 格式输出剧本片段，这些片段根据使用 CSS 的标准剧本约定进行格式化。