Die Zeilen- und Spaltenattribute von textarea in CSS

153

Ich möchte die textarea's rowsund colsAttribute über CSS einstellen .

Wie würde ich das in CSS machen?

css styling ASD
quelle
Ein Zeitpunkt für die Verwendung welcher Frage: stackoverflow.com/questions/3896537/…
Ciro Santilli 13 冠状 病 六四 事件 法轮功

Antworten:

107

widthund heightwerden verwendet, wenn Sie die CSS-Route gehen.

<!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>
Sampson
quelle
11
Wenn Sie gemäß der Antwort von user2928048 unten "em" anstelle von "px" verwenden, können Sie die Breite und Höhe in Zeichen wie bei den Attributen "Zeilen" und "Spalten" angeben. Funktioniert sogar mit IE6, glaube ich.
Swanny
Ich bin zwar damit einverstanden em, die Höhe anzugeben, bezweifle jedoch, dass damit die Breite angegeben werden kann. Es könnte mit Monospace-Schriftarten funktionieren (nachdem Sie das Verhältnis von Breite zu Höhe der Zeichen herausgefunden und den Breitenwert entsprechend geändert haben), und das war's. Außer Monospace, Zeichenbreite nicht festgelegt ist, so glaube ich nicht , emoder colsAttribut kann helfen , wenn die Breite angeben.
Akinuri
Ich könnte mich irren, aber px hat bei mir nicht funktioniert; sie taten es.
Jesse Steele
308 
<textarea rows="4" cols="50"></textarea>

Es ist äquivalent zu:

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

Wenn 1em der aktuellen Schriftgröße entspricht, machen Sie den Textbereich 50 Zeichen breit. siehe hier .

user2928048
quelle
39
Um genauer zu sein, müssen Sie nehmen paddingund line-heightin Rechnung. Angenommen, Sie haben oben und unten eine Polsterung von einem halben Em und eine Linienhöhe von 1,2 em. Dann wäre die Höhe für 4 Zeilen 1 + 4 * 1,2 = 5,8 em.
Nalply
2
@nalply Ihre Lösung ist korrekt. Das Problem ist 4em = 4 x Schriftgröße, die weder die Auffüllung noch die Zeilenhöhe berücksichtigt
Nicholas
3
Wenn Sie die Größe eines Eigenschaftsfelds haben: Inhaltsfeld; Sie müssen sich keine Gedanken über das Auffüllen machen, also bleiben Sie nur bei der Linienhöhe.
Mikewasmike
2
Nizza @nalply, danke für den Ansatz. Wenn Sie Ihrer Antwort ein wenig hinzufügen, kann die calc () CSS3-Funktion die Berechnung von Breite und Höhe vereinfachen: Angenommen, ich habe einen Textbereich mit 4px oben und unten, und ich möchte, dass er 3 Zeilen hoch ist. Die Höhe wäre height: calc(3em + 8px);.
GBU
Während rowsAttribut (etwas) zuverlässig ist, würde colsich mich nicht auf Attribut verlassen , es sei denn, ich verwende Monospace-Schriftarten im Textbereich. Siehe @ AlexanderScholz ' aktualisierte Geige .
Akinuri
16

Ich glaube nicht, dass du kannst. Ich gehe immer mit Höhe und Breite.

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

Das Schöne daran, es auf CSS-Art zu machen, ist, dass Sie es komplett neu gestalten können. Jetzt können Sie Dinge hinzufügen wie:

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

Soweit ich weiß, kannst du nicht.

Außerdem ist CSS sowieso nicht dafür gedacht. CSS dient zum Stylen und HTML zum Markup.

Moulde
quelle
1
CSS dient zum Gestalten der visuellen Darstellung eines Elements. Dies schließt die Breite und Höhe eines Textbereichs ein.
Sampson
Sie sind nicht die gleichen, nimmt der Browser - Konto in die Höhe des Textes in jeder Zeile darunter line-height, paddingauf dem Behälter (nicht eine Höhe Berechnung basierend auf box-sizing), auch unter Berücksichtigung der unterschiedlichen Seitenverhältnissen von Schriftarten verwendet , um das Textfeld zeigt die eingestellte Anzahl zu gewährleisten von Textzeilen, die Sie mit der CSS-Höhe nicht erreichen können.
William Isted
0

Ich wollte nur eine Demo mit calc () zum Einstellen von Zeilen / Höhe veröffentlichen, da dies niemand tat.

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>
Erweitern Sie das Snippet

Wenn Sie große Werte für die Auffüllungen verwenden (z. B. größer als 0,5 em), wird der Text angezeigt, der den Inhaltsbereich (-box) überläuft, und dies könnte Sie zu der Annahme führen, dass die Höhe nicht genau x Zeilen beträgt ( dass Sie einstellen), aber es ist. Um zu verstehen, was los ist, sollten Sie sich das Box-Modell und die Seiten mit der Boxgröße ansehen .

Akinuri
quelle