web-dev-qa-db-ja.com

テキストエリアの最大幅

Textarea max-widthに問題があります。この例では、サイズ変更時に。table-cell.twowidthを超えないようにする必要があります。

JSfiddleの例

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
}

純粋なCSSソリューションが必要なjavascriptの使用を推奨しないでください。

htmlcsstextarea
20
no1lov3sme

つかいます：

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

私にもこの問題があります。ソリューションは非常にシンプルですが、実験に数時間かかります...この2つのパラメータを使用してください同時に textarea要素クラス/＃要素スタイル定義（90％30％は値の例です）：

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

デフォルトでは、テキスト領域のサイズは変更可能です。要素の幅を増やしたい場合は、次の方法でできます。

HTML

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

CSS

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

jsfiddle のデモ

あなたの場合、親のサイズが固定されていない場合、<textarea>サイズを修正する必要があります。

3
Naveen - நவீன்

テキストエリアの場合は設定できます

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

そしてCSSで

textarea { height: auto; }
0
AVM