Add dashes until line break

3
votes

It is possible to style text so dashes will be added until a line break occurs.

Example:

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

as an input (a template generated by tinymce), but it's possible to introduce any extra markup as needed. The idea is to use html2pdf to generate a pdf file from this html using this format so I wonder if there's a solution using html/css/js, a tinymce's pluggin or by configuring html2pdf class somehow.

I have tried wrapping each paragrah inside span/p tags and then using the pseudo-class :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>

using a large content property attribute and hiding the extra dashes if a line break occurs. However it shows the whole content without hidding the extra dashes.

2
htmlcsstinymceline-breakshtml2pdf

2 Answers

1
votes

CSS is close, but there is limitations to what you can do here. Making each line wrapped in span is the key. Looks like you are missing overflow: hidden; on the span. Should be there, not on the :after psuedo selector.

Also, will need to make the span not wrap using white-space property.

Here's a fiddle, hope it gets you closer: 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>
0
votes

You can try this:

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

Of course you have to wrap your text into span elements and wrap all in some container divs manually or using script. Here is the script to select all the contents of some element (the body) and wrap text for you:

$(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>');

Demo.

Note that we use 2 containers, the outer .container and the inner .inner-container. It's because the .inner-container is used to clip the stuff while the outer container is used to render the border. Otherwise the border (if used) will be close to the ends of the dotted/dashed lines, which is ugly indeed.

EDIT: I've tested the demo and all the browsers seem to work well except the so-called FireFox, again FireFox has its own way of behavior, does not care about standard, ... I don't think there is some workaround here unless using some other approach. There are still some approaches out there but please note that the demo here renders all the dashed lines on an image background, there is some other solution but it can't work that way (I mean the text background will be shown up ugly), ...

Here is the ugly demo supporting FireFox, it's ugly because you can't show the text (with dashed lines at the end) on some image-background of the parent. However if the solid background is OK, this demo is acceptable (although it's more complicated than the first demo).