2

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

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

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

谢谢，J

4

3 回答 3

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 插件的输出。我相信这会以合理的 HTML 格式输出剧本片段，这些 HTML 是根据使用 CSS 的标准剧本约定进行格式化的。

于 2013-10-08T10:03:11.173 回答
0

您可以在 keyup 上使用jQuery autoresize 插件，例如这个 jsfiddle 示例

 $(document).ready(function() {
 $('textarea').on('keyup',function() {
     $('textarea').autosize();
 });

});

于 2013-10-08T10:20:18.897 回答
0

这段代码对我有用，希望对你有帮助，

<!DOCTYPE html>
<html>
<body>

<textarea  id="textarea" style="width: 140pt;  resize: none; overflow:hidden;">fdsf</textarea>

<script>
function setHeight()
{
var elem=document.getElementById("textarea");
var h=elem.offsetHeight;
var scrollHeight=elem.scrollHeight;
var innerHeight=elem.innerHeight;

if(scrollHeight>=h)
{
    elem.style.height=scrollHeight+"px";
}else
{
    elem.style.height=scrollHeight-2+"px";
}
}
setInterval(function(){setHeight()},30);
</script>

</body>
</html>
于 2013-10-08T10:35:07.567 回答