Antworten:
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>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.
<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 .
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.
height: calc(3em + 8px);.
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 .
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;
}Soweit ich weiß, kannst du nicht.
Außerdem ist CSS sowieso nicht dafür gedacht. CSS dient zum Stylen und HTML zum Markup.
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.
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>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 .