Добавете тирета до прекъсване на реда

Възможно е да стилизирате текста, така че да се добавят тирета, докато се появи нов ред.

Пример:

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------------------------------------------ --------------

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

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

Опитах се да опаковам всеки paragrah в тагове 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.

Освен това ще трябва да накарате обхвата да не се обвива с помощта на свойството за бяло пространство.

Ето една цигулка, надявам се да ви доближи: 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