подчеркивание блока по всему тексту

14 апреля 2021, 13:40

Есть вёрстка:

.container { 
  display: flex; 
} 
 
.text { 
  text-decoration: underline; 
}

<div class="container"> 
  <span class="text"> 
    <!-- Ширина данного блока может меняться --> 
    какой-то текст переменной длины  
  </span> 
  <span class="value"> 
    <!-- какое-то кодовое значение --> 
    1234 
  </span> 
</div>

Данная вёрстка используется для генерации PDF, для дальнейшей печати бланков.
Текст может быть разный как в одну строку так и в несколько строк.

Вопрос: как сделать так, что бы текст подчеркивался по типу текстовых полей на бумажном бланке (строки для заполнения текстовой информации в каком нибудь заявлении), т.е. по всей ширине поля родителя.

Answer 1

Имел некоторый опыт в верстке pdf для генерации в подобных скриптах, вечно там все работает туго.. :)

Как вариант вот такой костыль попробовать:

body, html { 
  margin: 0px; 
  padding: 0px; 
} 
 
.container { 
  width: 1000px; 
  position: relative; 
} 
.text { 
  position: absolute; 
  top: 0px; 
} 
.lines { 
  word-wrap: break-word; 
}

<div class="container"> 
<div class="text"> 
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. 
</div> 
<div class="lines"> 
_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ 
</div> 
</div>

Answer 2

Единственный вариант, который придумал и получилось кое-как реализовать, сделать на фоне линии, подобрав их высоту в зависимости от размера шрифта и высоты строк.

https://codepen.io/hisbvdis/pen/xvbdLv

.text { 
    background: linear-gradient(to bottom, transparent 17px, #000 17px) top left / 100% 18px; 
}

<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, odit dignissimos explicabo eos unde dolore aperiam repellat velit tempore quaerat odio corrupti saepe laboriosam delectus iste nostrum nobis ea sit eius labore ipsum voluptatum minima! Fugit minima magni quisquam provident voluptas omnis, ullam, obcaecati nulla molestias architecto accusamus corporis corrupti inventore. Dignissimos tenetur sunt eveniet cum numquam, animi corporis cumque nobis aperiam dolor sequi qui ipsam minima rerum dicta iure officia illum dolorum fugit tempora assumenda nemo impedit! Quod vitae id libero omnis corrupti assumenda aspernatur dolorum ad iusto necessitatibus rerum quis amet recusandae explicabo qui consequatur, consectetur accusantium quae?</p>