文本区域最大宽度答案

【问题标题】：Textarea max-width文本区域最大宽度
【发布时间】：2015-03-12 10:11:02
【问题描述】：

我的 textarea 最大宽度有问题，我需要它在调整大小时不超过 .table-cell.two 宽度，在此示例中：

HTML：

<div class="wrapper">
<div class="table">
    <div class="table-cell one">
        <p>small cell</p>
    </div>
    <div class="table-cell two">
        <p>textarea cell</p>
        <textarea></textarea>
    </div>
</div>

CSS：

textarea {
  max-width: 100%;
}

.wrapper {
  width: 500px;
}

.table {
  display: block;
  width: 100%;
}

.table-cell {
  display: table-cell;
  background: #E2D8C1;
  vertical-align: top;
  padding: 10px;
}

.table-cell.two {
  width: 100%;
  background: #DAC082;
}

.table textarea {
  max-width: 100%;
  width: 100%;
  height: 100px
}

请不要建议使用 javascript，需要一个纯 css 解决方案。

【问题讨论】：

对我来说看起来不错。正确描述你的问题，你想要什么？
抱歉，在调整 textarea 大小时，我只需要调整高度，宽度应保持 100%

标签： html css textarea

【解决方案1】：

用途：

textarea { 
   /* will prevent resizing horizontally */
   resize:vertical;
}

【讨论】：

IE/Edge等主流浏览器不支持此功能：caniuse.com/#search=resize
Edge 和所有其他主流浏览器现在都支持它。

【解决方案2】：

我也有这个问题。解决方案非常简单，但我花了几个小时进行实验...在 textarea 元素类/#element 样式定义中同时使用这两个参数（90% 30% 是示例值）：

.textarea {
    width:90%;
    max-width:90%;
    max-height:30%;
}

【讨论】：

这行得通，textarea 初始宽度是父级的宽度，但随后宽度与父级按比例缩小，正如预期的那样。

【解决方案3】：

默认情况下，文本区域可调整大小。如果要增加元素宽度，可以通过

HTML

<textarea rows="4" cols="50">Content here</textarea>

CSS

max-width: 300px;
max-height:300px

jsfiddle上的演示

在您的情况下，您想在父级没有固定大小时修复 <textarea> 大小。

【讨论】：

【解决方案4】：

对于textarea你可以设置

<textarea rows="5"></textarea>

在css中

textarea { height: auto; }

【讨论】：