html – Textarea max-width

发布时间：2020-12-14 18:58:21 所属栏目：资源来源：网络整理

导读：我有textarea max-width的问题,我需要它不超过.table-cell.two宽度调整大小,在这个例子： JSfiddle example HTML： div class="wrapper"div class="table" div class="table-cell one" psmall cell/p /div div class="table-cell two" ptextarea cell/p text

我有textarea max-width的问题,我需要它不超过.table-cell.two宽度调整大小,在这个例子：

JSfiddle example

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 { 
   /* will prevent resizing horizontally */
   resize:vertical;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!