строки textarea и атрибут cols в CSS

154

Я хотел бы установить textarea«S rowsи colsатрибуты с помощью CSS.

Как бы я сделал это в CSS?

css styling ASD
источник
А когда использовать какой вопрос: stackoverflow.com/questions/3896537/…
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功

Ответы:

106

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
Согласно ответу пользователя 2928048 ниже, если вы используете «em», а не «px», вы можете указать ширину и высоту в символах, как если бы вы использовали атрибуты 'row' и 'cols'. Даже работает с IE6 я считаю.
Суонни
Хотя я согласен с использованием emдля указания высоты, я сомневаюсь, что она может быть использована для указания ширины. Он может работать с моноширинными шрифтами (после определения соотношения ширины и высоты символов и изменения значения ширины соответственно), и все. За исключением моноширинного пространства, ширина символов не фиксирована, поэтому я не думаю, что атрибут emили colsатрибут могут помочь при указании ширины.
akinuri
Я могу ошибаться, но px не работает для меня; Эм сделал.
Джесси Стил
310 
<textarea rows="4" cols="50"></textarea>

Это эквивалентно:

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

где 1em соответствует текущему размеру шрифта, таким образом, текстовая область должна иметь ширину 50 символов. смотрите здесь .

user2928048
источник
39
Чтобы быть более точным, вы должны принять paddingи line-heightв счете. Скажем, у вас есть отступ в половину em сверху и снизу и высотой строки 1,2em, тогда высота для 4 рядов будет 1 + 4 * 1,2 = 5,8em.
Вскоре
2
@nalply ваше решение правильно. Проблема в 4em = 4 x размера шрифта, который не учитывает ни отступы, ни высоту строки
Николас
3
Если у вас есть свойство box-sizing: content-box; вам не придется беспокоиться о заполнении, поэтому вы остаетесь только с высотой строки.
mikewasmike
2
Отлично @nalply, спасибо за подход. Добавив немного к вашему ответу, CSS3-функция calc () может облегчить вычисление ширины / высоты: скажем, у меня есть текстовое поле с отступами top-padding и padding-bottom 4px, и я хочу, чтобы оно было 3 ряда в высоту, высота была бы height: calc(3em + 8px);,
ГБУ
Хотя 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 для разметки.

Moulde
источник
1
CSS предназначен для стилизации визуального представления элемента. Это включает в себя ширину и высоту текстовой области.
Сэмпсон
Они не являются такими же, браузер принимает во внимание высоту текста на каждой строке в том числе line-height, paddingна контейнере (не вычисления высоты на основе box-sizing), даже принимая во внимание различные соотношения сторон шрифтов , используемых для обеспечения текстовое поле отображает номер набора строк текста, которые вы не можете достичь с помощью высоты CSS.
Уильям Истед
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 строк ( что вы установили), но это так. Чтобы понять, что происходит, вы, возможно, захотите проверить страницы блочной модели и размеров коробок .

akinuri
источник