0

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

.container {
  display: flex;
}

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

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

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

1
  • 1
    дайте фото чего вы хотите (нарисуйте в граф редакторе)...а то не совсем понятно 19 июл 2019 в 6:00

2 ответа 2

2

Имел некоторый опыт в верстке 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>

4
  • а как работает в .lines > top:0 left: 0 если у .lines если указано позиционирование ? 26 июл 2019 в 3:36
  • Сорри, пробовал по разному и ночью забыл подчистить. Исправил. :)
    – Crus
    26 июл 2019 в 6:31
  • Круто, осталось проверить как это съест wkhtmltopdf
    – AlexKnow
    3 авг 2019 в 12:24
  • Если не получится - напишите, подумаю как ещё.
    – Crus
    3 авг 2019 в 13:54
0

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

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>

1
  • 1
    То же так сделал, но когда я перевожу html в Pdf с помощью vkhtmltopdf, данная верстка разваливается.
    – AlexKnow
    23 июл 2019 в 9:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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