1

When I say lines I don't mean those specified in the html (ex. <br>) but lines which are created because of the width of a div, or the width of the browser etc.

I have tried:

p::first-line::before{
    content: "("

But 1. it didn't worked and 2. I need to be applied in all lines. Is there any way to implement this in css or javascript?

theshepherd
  • 55
  • 4
  • 2
    Not with CSS...Pseudo-elements are applied to elements not the content of the elements. JS would have to break each line **on line breaking** into separate spans or insert the character after each break...quite complicated. – Paulie_D Aug 10 '16 at 11:57
  • 3
    If this is purely a visual effect you coudl probably do something with a background image. Perjaps you could clarify what it is you are trying to achieve...this feels like an XY problem. – Paulie_D Aug 10 '16 at 12:00
  • I would like to use it for stylig purposes... But I believe it's generally intresting, that's why I am not so specific. – theshepherd Aug 10 '16 at 12:57

3 Answers3

4

If you can use background images then you can get something that approximates the effect.

p {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  padding: 0 1.2em;
  line-height: 1.4em;
  background-image: url(http://img.fontspace.com/preview/char/0a3b5c4924e2ee05a5ee41220b030556.png), url(http://img.fontspace.com/preview/char/66061fdb022dc689da01c6ea4117bff4.png);
  background-position: right 0, left 0;
  background-size: 1.4em 1.4em;
  background-repeat: repeat-y;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis maxime, quibusdam. Architecto, hic.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis maxime, quibusdam. Architecto, hic. Eum sequi modi nemo harum, odio, officia a placeat necessitatibus doloremque aliquam quidem labore molestias temporibus molestiae, delectus aut amet ex
  ab dolorum consequatur.</p>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

I have used this code for <pre> tag line numbers. You just get text lines splitting it with \n and count lines. Than just append single column prefixes. You can combine it with this answer for proper results

$(document).ready(function() {
  $('pre').each(function() {
    $(this).html($(this).html().trim());

    var wrapper = $(this).wrap("<div class=\"code-wrapper\">"),
      totalLines = Math.max(1, parseInt($(this).text().split(/\n/).length)),
      predefinedLineHeight = 25;

    if ($(this).outerHeight() / totalLines < predefinedLineHeight) {
      totalLines--;
    }

    var lines = $("<div class=\"code-lines-numbers\">");

    for (var i = 0; i <= totalLines; i++) {
      lines.append("<span class=\"code-line-number\">(</span>");
    }

    $(this).parent().prepend(lines);
  });
});
.code-lines-numbers {
  width: 15px;
  float: left;
}
.code-line-number {
  float: left;
  width: 100%;
}
pre,
.code-lines-numbers {
  line-height: 20px;
  font-family: Arial;
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
5
6
4
56
45
465
</pre>
Community
  • 1
  • 1
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • Don't forget the closing bracket; while it's not mentioned in the question, it is mentioned in the question title. – Shaggy Aug 10 '16 at 12:28
  • I don't understand why this is relevant with what I am trying to do. I have clarified that I am not using any special newline characters or html. In case I am missing something, pleace correst me. Thanks though, – theshepherd Aug 10 '16 at 13:00
-2

var lines = Math.floor(document.querySelector('.main').offsetHeight / 24);
for(var i = 0; i < lines; i++){
 document.querySelector('.start_col').innerHTML += '(';
  document.querySelector('.end_col').innerHTML += ')';
}
.start_col, .end_col{
  display: inline-block;
  width: 5px;
  vertical-align: top;
  word-wrap: break-word;
  font-size: 16px;
  line-height: 24px;
}
.main{
  display: inline-block;
  width: calc(100% - 10px);
  font-size: 16px;
  line-height: 24px;
}
<div class="start_col"></div><div class="main">Qui ea malis zril, ea nam meis noluisse postulant. Brute idque platonem an vis. Vim te quod pertinax, dicit scaevola necessitatibus id vim. Quot iuvaret pro ut, ut eos regione voluptua tincidunt. Scripta definitionem nam id, prodesset mediocritatem ne eam. Sint officiis quaestio cum cu, at usu regione maluisset.

Mei ei fugit assentior ullamcorper, in eos ludus virtute. Pro ferri munere laboramus an, pro ea bonorum senserit efficiantur. Cibo nostrud ne vix. Ex vide equidem erroribus his.

Ex mei percipit aliquando referrentur. Ad ius duis dicant signiferumque, sit ex nibh scripta repudiandae. Mea illum nostro in, eros graecis urbanitas no pri. Latine oporteat per id, sea et modo aliquip posidonium.

Quo ex fugit libris latine. Te has graeco facilisis, laudem semper complectitur nam ne. Cum aeterno denique qualisque ut, in soleat regione posidonium vim. Probo alterum id est, ex delectus luptatum dissentiunt cum, eu affert suavitate abhorreant vix. No erat soleat labitur mea. Ea perfecto accusata quaestio vix.

</div><div class="end_col"></div>
966647
  • 35
  • 1
  • 6
  • 1
    This is not very clear, does not contain any code or information on how to actually do this and would be better off as a comment. If you cannot comment yet, you have to earn your reputation by providing good answers first, which this is not. – somethinghere Aug 10 '16 at 12:07