Добавляйте тире до разрыва строки

Можно стилизовать текст таким образом, чтобы тире добавлялись до тех пор, пока не произойдет разрыв строки.

Пример:

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ------------------------------------------ --------------

Lorem ipsum dolor sit amet, conctetur adipisicing elit ----------------------------------------- --------------------- Lorem ipsum --------------------------- -------------------------------------------------- -------------------------------------- Lorem ipsum dolor sit amet, conctetur ----- -------------------------------------------------- -------------------------

в качестве входных данных (шаблон, созданный tinymce), но при необходимости можно ввести любую дополнительную разметку. Идея состоит в том, чтобы использовать html2pdf для создания файла pdf из этого html с использованием этого формата, поэтому мне интересно, есть ли решение, использующее html / css / js, плагин tinymce или каким-то образом настроив класс html2pdf.

Я попытался обернуть каждый параграф внутри тегов span / p, а затем использовать псевдокласс : after

span:after {
  display: inline-block;
  content: " -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ";
  width: 100%;
  overflow: hidden;
}
<html>

<body>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit
  <br> Lorem ipsum
  <br> Lorem ipsum dolor sit amet, consectetur
</body>

</html>

используя большой атрибут свойства содержимого и скрывая лишние дефисы, если происходит разрыв строки. Однако он показывает все содержимое, не скрывая лишних тире.


html css line-breaks tinymce html2pdf
person M. Cortes    schedule 04.06.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

CSS близок, но есть ограничения на то, что вы можете здесь делать. Ключевым моментом является создание каждой строки, заключенной в span. Похоже, вам не хватает overflow: hidden; на пролет. Должен быть там, а не в селекторе псевдо: after.

Кроме того, необходимо, чтобы диапазон не переносился с использованием свойства white-space.

Вот скрипка, надеюсь, она вам ближе: http://jsfiddle.net/adamfullen/6mG54/

span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

span:after {
  content: " -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ";
}
<span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    </span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
<br>
<span>Lorem ipsum</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur</span>

person Adam Fullen    schedule 04.06.2014

arrow_upward
0
arrow_downward

Вы можете попробовать это:

body {
  background:url(http://placekitten.com/800/600);
}
div.container {
  border:1px solid white;
  padding:10px;
  width:700px;
  margin:0 auto;
}
div.inner-container {
  overflow:hidden;          
  position:relative;
  width:100%;
}
div.inner-container span {
  color:white;
  position:relative;     
  font-size:20px;
}
div.inner-container span:after {
  content:'';    
  position:absolute;
  width:300vw; /* as large as possible */
  border-bottom:0.05em dotted white;
  left:100%;
  bottom:0.25em;
  z-index:-1;
}

Конечно, вам нужно обернуть текст в span элементы и обернуть все в некоторые контейнерные div вручную или с помощью скрипта. Вот сценарий для выбора всего содержимого некоторого элемента (тела) и переноса текста за вас:

$(document.body).contents().wrapAll("<div class='container'>")
                .closest('div.container')
                .wrapInner("<div class='inner-container'>")
                .end().filter(function(i,e){ return e.nodeType == 3}).wrap('<span>');

Демо.

Обратите внимание, что мы используем 2 контейнера: внешний .container и внутренний .inner-container. Это потому, что .inner-container используется для обрезки материала, в то время как внешний контейнер используется для визуализации границы. В противном случае граница (если она используется) будет близко к концам пунктирных / пунктирных линий, что действительно некрасиво.

РЕДАКТИРОВАТЬ: я протестировал демоверсию, и все браузеры, похоже, работают хорошо, за исключением так называемого FireFox, опять же FireFox ведет себя по-своему, не заботится о стандартах ... Я не думаю, что здесь есть какое-то обходное решение , если используя какой-то другой подход. Есть еще несколько подходов но, обратите внимание, что демонстрация здесь отображает все пунктирные линии на фоне изображения, есть другое решение, но оно не может работать, что путь (я имею в виду, что фон текста будет отображаться некрасиво), ...

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

person King King    schedule 04.06.2014