Câu trả lời:
widthvà heightđược sử dụng khi đi tuyến đường 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>emđể chỉ định chiều cao, tôi nghi ngờ rằng nó có thể được sử dụng để chỉ định chiều rộng. Nó có thể hoạt động với phông chữ đơn cách (sau khi tìm ra tỷ lệ chiều rộng: chiều cao của các ký tự và sửa đổi giá trị chiều rộng tương ứng), và đó là nó. Ngoại trừ không gian đơn, độ rộng ký tự không cố định, vì vậy tôi không nghĩ emhoặc colsthuộc tính có thể giúp khi chỉ định chiều rộng.
<textarea rows="4" cols="50"></textarea>Nó tương đương với:
textarea {
height: 4em;
width: 50em;
}trong đó 1em tương đương với kích thước phông chữ hiện tại, do đó làm cho vùng văn bản rộng 50 ký tự. xem tại đây .
paddingvà line-heighttrong tài khoản. Giả sử bạn có phần đệm bằng một nửa em ở trên cùng và ở dưới cùng và chiều cao của dòng là 1,2em, thì chiều cao cho 4 hàng sẽ là 1 + 4 * 1.2 = 5,8em.
height: calc(3em + 8px);.
rowsthuộc tính là (phần nào) đáng tin cậy, tôi sẽ không dựa vào colsthuộc tính trừ khi tôi sử dụng phông chữ đơn cách trên vùng văn bản. Xem fiddle cập nhật của @ AlexanderScholz .
Tôi không nghĩ bạn có thể. Tôi luôn luôn đi với chiều cao và chiều rộng.
textarea{
width:400px;
height:100px;
}Điều tuyệt vời khi làm theo cách CSS là bạn hoàn toàn có thể tạo kiểu cho nó. Bây giờ bạn có thể thêm những thứ như:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}Theo tôi biết, bạn không thể.
Bên cạnh đó, đó không phải là những gì CSS dành cho. CSS là để tạo kiểu và HTML là để đánh dấu.
line-height, paddingtrên bộ chứa (không tính chiều cao dựa trên box-sizing), thậm chí có tính đến các tỷ lệ khung hình khác nhau được sử dụng để đảm bảo hộp văn bản hiển thị số đã đặt hàng văn bản mà bạn không thể đạt được bằng cách sử dụng chiều cao css.
Tôi chỉ muốn đăng một bản demo bằng calc () để đặt hàng / chiều cao, vì không ai làm.
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>Nếu bạn sử dụng các giá trị lớn cho phần đệm (ví dụ: lớn hơn 0,5em), bạn sẽ bắt đầu thấy văn bản tràn ra khu vực nội dung (hộp) và điều đó có thể khiến bạn nghĩ rằng chiều cao không chính xác là x hàng ( mà bạn đặt), nhưng nó là. Để hiểu những gì đang diễn ra, bạn có thể muốn xem Mô hình hộp và các trang kích thước hộp .