Question

textarea的高度和宽度是否有任何方法可以根据其内容进行更改？不需要滚动条。

HTML：

<td valign="top" width="100%">
    <textarea class="msg"> everything is good.. </textarea>
</td>

CSS：

.msg{
    padding:20px;
    color:#fff;
    font-size:18px;
    height:auto;
    line-height:30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space:normal;
    word-wrap:break-word;
    resize:none;
    overflow:hidden;
}

Answer 1

您可以使用scrollWidth和scrollHeight更新元素的样式以匹配其内容的尺寸。

Element.scrollWidth 只读属性返回元素内容的宽度（以像素为单位）或元素本身的宽度（以较大者为准）。如果元素比其内容区域宽（例如，如果有滚动条用于滚动内容），则scrollWidth大于clientWidth。

Element.scrollHeight 只读属性是元素内容高度的度量，包括因溢出而在屏幕上不可见的内容。 scrollHeight值等于元素在不使用垂直滚动条的情况下拟合视点中的所有内容所需的最小clientHeight。它包括元素填充，但不包括其边距。

使用jQuery：

var msg = $('.msg');
msg.css('width',  msg[0].scrollWidth);
msg.css('height', msg[0].scrollHeight);

但是，当内容变小时，它似乎不会收缩。

我们可以通过在检查尺寸之前强制缩小尺寸来缩小尺寸，从根本上重置最小尺寸。

msg.css('width',  1);
msg.css('height', 1);
msg.css('width',  msg[0].scrollWidth);
msg.css('height', msg[0].scrollHeight);

演示JSFiddle。

如何根据内容的大小更改textarea的宽度和高度？

1 个答案: