如何制作适合当前视口宽度的 <textarea> ？

Posted 2023-05-07

【中文标题】如何制作适合当前视口宽度的 <textarea> ？

【英文标题】：How can I make a <textarea> that fits within the width of the current viewport?

【发布时间】：2016-12-28 07:57:41

【问题描述】：

我怎样才能使我的<textarea> 不会超出小显示器的边框？我希望我的<textarea> 获得当前显示的宽度。

<textarea></textarea>

【参考方案1】：

您需要将其默认 box-sizing 更改为不同的值。

textarea 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;

【参考方案2】：

在元素上设置最大宽度。

textarea 
  max-width: 100%;

<textarea></textarea>

【参考方案3】：

试试textarea max-width:95%; - 它总是适合您的显示器。

【参考方案4】：

我同意上述所有答案，但未解决的一个问题是，如果您不指定列数，则 textarea 将不会实际填充 div 或元素的宽度。所以我使用以下内容：

<textarea cols="120" style="max-width:100%;">TEXT GOES HERE</textarea>

我将列数设置为略大于大屏幕上 div 的宽度，并且随着屏幕变小，它会响应屏幕尺寸。

【讨论】：

我喜欢这个评论，它很有道理，似乎是最简单的解决方案

【参考方案5】：

您可以通过以下方式禁用文本区域调整大小：

textarea 
   resize: none;

并将 max-width 设置为容器 div 或 table 的宽度

【讨论】：

您能否编辑您的答案并详细说明如何设置最大宽度。 （另外，我不小心对你的答案投了反对票，一旦你编辑它，我就可以给它应得的投票。）谢谢！

【参考方案6】：

您可以执行以下操作：

div textarea 
  box-sizing: border-box;
  max-width: 50%;

<div>
  <textarea cols="100" rows="7"></textarea>
</div>

同时设置max-width 和box-sizing 可确保textarea 遵守其定义的宽度，即使cols 的数量超过设置的max-width。