HTML Textarea для изменения размера по вертикали, чтобы содержать 5000 символов

Question

HTML Textarea для изменения размера по вертикали, чтобы содержать 5000 символов

0

Привет, ребята, у меня есть Textarea в html со 100% шириной его контейнера, есть ли способ исправить высоту Textarea, чтобы она соответствовала 5000 символам без полосы прокрутки, используя только Css?

Я установил Css как

textarea {
    font-family: inherit;
    width: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    resize: vertical;
    box-sizing: border-box; /* For IE and modern versions of Chrome */
    -moz-box-sizing: border-box; /* For Firefox                          */
    -webkit-box-sizing: border-box; /* For Safari                           */
}

Edit: Ok моя ширина составляет 100%, что делает текстовое поле подходящим для 100% размера экрана/контейнера. Поэтому, если ширина экрана равна 800 пикселей, а шрифт составляет 12 пикселей, я хочу, чтобы высота текстового поля была настроена так, чтобы она вмещала 5000 персонажи.

Flood Gravemind 04 окт. 2013, в 20:24

Источник

0

У вас нет возможности узнать, насколько широкий 100%. Для одного парня это может быть 50 символов, другой может вместить 1000 символов. Если бы вы точно знали, насколько широк элемент, тогда можно было бы получить приблизительную оценку с помощью этой формулы: 5000 / width * line-height . Вам нужен JS для этого.
cimmanon 04 окт. 2013, в 18:11

Теги:

html

css

2 ответа

0

С помощью только CSS? Я ответу честно: Нет.

andi 04 окт. 2013, в 15:56

Ещё вопросы

У вас нет возможности узнать, насколько широкий 100%. Для одного парня это может быть 50 символов, другой может вместить 1000 символов. Если бы вы точно знали, насколько широк элемент, тогда можно было бы получить приблизительную оценку с помощью этой формулы: 5000 / width * line-height . Вам нужен JS для этого.

Yotam · Accepted Answer · 2013-10-04T14-48-00.000Z

Лимитирующие символы не так сложны, так как у вас есть максимальная длина атрибута. В теге textarea.

Предполагая, что вам понадобится 5000 символов в вашем текстовом поле, вы будете использовать следующий код:

<textarea rows="4" cols="50" maxlength="5000">
   Enter text here...
</textarea>

Итак, как вы можете сказать, я добавил атрибут maxlength внутри тега textarea и установил его на 5000.

Таким образом, после того, как вы установите максимальную длину, вы можете просто добавить альтернативный способ в CSS, чтобы сохранить прокрутку и сделать высоту равной 5000 таким образом:

textarea{
 overflow: hidden;
 height: auto;
}

Там нет ничего, что устанавливает видимую часть текстового поля в 5000 символов. Maxlength не меняет размеры. Ваш код прямо сейчас просто использует атрибут строки, чтобы установить высоту; высота: авто ничего не делает.