已知maxLength与行高，如何计算Textarea的max-height？

当然有可行的计算方法啦！咱们一步步拆解清楚：

首先，textarea的cols属性是关键——它定义了每行大致能容纳的平均字符数（默认一般是20，你可以根据自己的布局调整）。咱们先拿具体数值举例：

假设你的textarea设置了cols="40"，那每行大概能放40个字符。200字符的话，最多需要的行数就是 200 ÷ 40 = 5 行。

已知line-height是18px，那纯文本内容的高度就是 5 × 18px = 90px。但别忘了textarea通常会有上下内边距（padding-top/padding-bottom），这些会占用额外高度。比如如果你给textarea设了padding: 4px 8px（上下4px，左右8px），那最终的max-height就得加上上下内边距：90px + 4px + 4px = 98px。

如果你的cols值不同，比如cols="30"，那200字符需要的行数就是向上取整的200 ÷ 30 ≈ 7行，对应的纯文本高度是7×18=126px，加上上下padding的话就是最终max-height。

另外，为了避免用户输入无空格的超长字符串（比如一串连续的字母或数字）撑破行数限制，建议加上word-break: break-all的CSS属性，强制超长字符换行，保证每行字符数符合cols的预期。

给你个具体的代码示例参考：

CSS 样式 #

.limited-textarea {
  line-height: 18px;
  padding: 4px 8px; /* 自定义内边距，按需调整 */
  max-height: calc(5 * 18px + 4px + 4px); /* 5行高度 + 上下内边距 */
  resize: vertical; /* 只允许垂直调整大小，符合需求 */
  word-break: break-all; /* 强制换行，避免异常撑高 */
}

HTML 结构 #

<textarea maxlength="200" cols="40" class="limited-textarea"></textarea>

如果你需要更灵活的动态计算（比如不确定cols值，或者要适配不同屏幕），也可以用JavaScript：创建一个隐藏的<span>元素，设置和textarea相同的字体、line-height、宽度，插入测试文本计算每行字符数，再反推max-height。不过在已知cols的情况下，静态计算已经足够准确啦。

内容的提问来源于stack exchange，提问作者enessahin