Відповіді:
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>emдля визначення висоти, я сумніваюся, що його можна використовувати для визначення ширини. Це може працювати з однопросторовими шрифтами (після з'ясування співвідношення ширини: висоти символів та відповідної зміни ширини), і все. За винятком монопростіру, ширина символів не фіксована, тому я не думаюem , або colsатрибут може допомогти при визначенні ширини.
<textarea rows="4" cols="50"></textarea>Він еквівалентний:
textarea {
height: 4em;
width: 50em;
}де 1em еквівалентно поточному розміру шрифту, таким чином зробіть область тексту на 50 символів шириною. дивіться тут .
paddingі line-heightв рахунку. Скажімо, у вас вгорі і внизу обшивка в половині ем, висота лінії 1,2ем, то висота для 4 рядків буде 1 + 4 * 1,2 = 5,8ем.
height: calc(3em + 8px);.
rowsатрибут є (дещо) надійним, я б не покладався на colsатрибут, якщо я не використовую однопросторові шрифти на текстовій області. Дивіться оновлений загадку @ AlexanderScholz .
Я не думаю, що ти можеш. Я завжди йду з висотою та шириною.
textarea{
width:400px;
height:100px;
}приємна річ, як зробити це CSS способом, це те, що ви можете повністю стилізувати його. Тепер ви можете додати такі речі, як:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}Наскільки я знаю, ви не можете.
Крім того, це не те, що CSS для будь-якого. CSS призначений для стилізації, а HTML - для розмітки.
line-height, paddingна контейнері (НЕ обчислення висоти на основі box-sizing), навіть беручи до уваги різні співвідношення сторін шрифтів , використовуваних для забезпечення текстове поле відображає номер набору рядків тексту, яких ви не можете досягти, використовуючи висоту css.
Я просто хотів опублікувати демонстрацію, використовуючи 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,5ем), ви почнете бачити текст, який переповнює область вмісту (-box), і це може привести вас до думки, що висота не є точнісією x рядків ( що ви встановили), але це так. Щоб зрозуміти , що відбувається, ви можете перевірити Коробка і коробки-розмірів сторінок.