CSSのtextareaの行とcols属性

154

私は設定したいtextareaのrowsとcolsCSSを経由して属性を。

CSSでこれを行うにはどうすればよいですか？

css styling

— ASD
ソース

A使用時への質問：stackoverflow.com/questions/3896537/...

— チロSantilli郝海东冠状病六四事件法轮功

107

widthそしてheight、CSSルートを行くときに使用されます。

<!DOCTYPE html>
<html>
    <head>
        <title>Setting Width and Height on Textareas</title>
        <style>
            .comments { width: 300px; height: 75px }
        </style>
    </head>
    <body>
        <textarea class="comments"></textarea>
    </body>
</html>

— サンプソン
ソース

12

以下のuser2928048の回答に従って、「px」ではなく「em」を使用する場合、「rows」および「cols」属性の場合と同様に、幅と高さを文字で指定できます。IE6でも動作すると思います。

— スワニー14

em高さの指定に使用することに同意しますが、幅の指定に使用できるかどうか疑問です。それは可能性がある（幅考え出す後：文字の高さの比率を、それに応じて幅の値を変更する）モノスペースフォントで動作し、それはそれです。モノスペースを除いて、文字の幅は固定されていないので、幅を指定するときに属性emやcols属性が役に立たないと思います。

— akinuri

私は間違っているかもしれませんが、pxが機能しませんでした。emしました。

— Jesse Steele

309

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

これは次と同等です。

textarea {
    height: 4em;
    width: 50em;
}

ここで、1emは現在のフォントサイズに相当するため、テキスト領域の幅は50文字になります。こちらをご覧ください。

— ユーザー2928048
ソース

39

より正確には、考慮に入れる必要がpaddingありline-heightます。たとえば、上部と下部に半emのパディングと1.2emの行の高さがある場合、4行の高さは1 + 4 * 1.2 = 5.8emになります。

— nalply 2014

2

@nalplyあなたのソリューションは正しいです。問題は4em = 4 x font-sizeで、パディングも行の高さも考慮されていません

— Nicholas

3

プロパティbox-sizing：content-box;がある場合パディングについて心配する必要はないので、行の高さのみを維持します。

— mikewasmike 2015

2

@nalply、アプローチに感謝します。答えに少し加えて、calc（）CSS3関数は幅/高さの計算を簡単にすることができます：padding-topとpadding-bottomが4pxのtextareaがあり、高さを3行にしたいとすると、高さはheight: calc(3em + 8px);。

— GBU 2017年

一方でrows、属性が（多少）信頼性があり、私はに依存しないだろうcols、私はテキストエリアに等幅フォントを使用していない限り、属性。@AlexanderScholzの更新されたフィドルを参照してください。

— akinuri

16

できないと思います。私は常に高さと幅で行きます。

textarea{
width:400px;
height:100px;
}

CSSでそれを行うことの良い点は、完全にスタイルアップできることです。次のようなものを追加できます：

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}

— コードモンキー
ソース

4

私の知る限りではできません。

その上、それはとにかくCSSが何のためにあるのかではありません。CSSはスタイリング用で、HTMLはマークアップ用です。

— モールデ
ソース

1

CSSは、要素の視覚的表現をスタイリングするためのものです。これには、textareaの幅と高さが含まれます。

— サンプソン

彼らは同じではない、ブラウザが考慮に含め、各行のテキストの高さをとりline-height、padding容器上（に基づいて高さを算出していないbox-sizing）も考慮にテキストボックスが表示に設定された数を確保するために使用されるフォントの異なるアスペクト比を取りますcssの高さを使用して達成できないテキストの行の。

— William Isted

0

誰も行かなかったので、行/高さを設定するためにcalc（）を使用してデモを投稿したかっただけです。

body {
  /* page default */
  font-size: 15px;
  line-height: 1.5;
}

textarea {
  /* demo related */
  width: 300px;
  margin-bottom: 1em;
  display: block;
  
  /* rows related */
  font-size: inherit;
  line-height: inherit;
  padding: 3px;
}

textarea.border-box {
  box-sizing: border-box;
}

textarea.rows-5 {
  /* height: calc(font-size * line-height * rows); */
  height: calc(1em * 1.5 * 5);
}

textarea.border-box.rows-5 {
  /* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
  height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}

<p>height is 2 rows by default</p>

<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

<p>height is 5 now</p>

<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

<p>border-box height is 5 now</p>

<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

スニペットを展開

パディングに大きな値（たとえば、0.5emより大きい）を使用すると、コンテンツ（-box）領域をオーバーフローするテキストが表示されるようになり、高さが正確にx行ではないと考える可能性があります（あなたが設定したこと）、しかしそれはそうです。何が起こっているのかを理解するには、ボックスモデルとボックスサイズ設定のページをご覧ください。

— あきぬり
ソース