0

Представил на картинке ниже. Если не будет хватать места то добавится ещё одна строка. Возможно ли сделать такое только на CSS. Если нет, то хотелось бы увидеть решение на чистом JS.

введите сюда описание изображения

Попытался сделать с CSS. Возможно лучше использовать textarea, но мне нужно подчеркивание строк.

input[type="text"] {
  width: 80px;
  word-break: break-all;
  border: none;
  border-bottom: 1px solid red;
}
<input type="text">

0

1 ответ 1

0

Обычный div изначально ведет себя именно так - добавляет себе высоты по мере необходиомсти.

div {
  background: black;
  color:red;
  padding:2em;
  font-size:20px;
  text-decoration:underline;
  max-width:200px;
  margin-right:2em;
  display:inline-block;
  vertical-align:top;
}
<div>
Тут меньше текста <br>
Строка текста <br>
Строка текста <br>
<b>Строка текста </b>
Строка текста <br>
Строка текста <br>
</div>


<div>
Тут больше текста <br>
И под него выделяется место <br>
Строка текста <br>
<b>Строка текста </b><br>
Строка текста <br>
<h1>Строка текста </h1>
Строка текста <br>
Строка текста 
</div>

И, да, textarea прекрасно обстиливается, в том числе и подчеркивание строк работает. А вот добавление высоты автоматом для textarea как раз тот еще геморрой...

Обычно делают так: Создают нужный div, поверх накладывают (или в него вкладывают) невидимую textarea с теми же отступами-шрифтами-размерами и скрипт на каждое изменение в textarea меняет содержимое div'а.


Но самый труъ вариант - современный: добавить элементу атрибут contenteditable="true". Во: https://codepen.io/anon/pen/pMzEOK

3
  • и правда звучит сложновато, может быть есть более элегантное решение? :)
    – stiv
    Commented 17 июл. 2019 в 8:33
  • Есть, но только для современных браузеров. Добавил в ответ. Commented 17 июл. 2019 в 9:02
  • Оффтопик: чтобы ваше подчеркивание текста не превращалось в гэ, по умолчанию включенное в современном Хроме, добавьте стиль text-decoration-skip-ink: none. Или более универсально - заверните текст в <div><span>...</span></div>, спану добавьте нижний бордер и сделайте редактируемым именно его - тогда можно будет манипулировать габаритами и отступами подчеркивания, а по высоте будет распираться родитель-див. Commented 17 июл. 2019 в 9:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.