Question

当我说行不表示html（例如<br>）中指定的行，但是由于div的宽度或宽度而创建的行浏览器等。

我试过了：

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

但是1.它没有用，2。我需要在所有行中应用。有没有办法在css或javascript中实现这个？

Answer 1

如果您可以使用背景图像，那么您可以获得近似效果的内容。

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>

Answer 2

我已将此代码用于<pre>标记行号。您只需将文本行与\n分开即可和计数行。而不只是附加单列前缀。您可以将其与this answer结合使用，以获得正确的结果

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
5
6
4
56
45
465
</pre>

＆＃13;

Answer 3

＆＃13;

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 += ')';
}

＆＃13;

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

＆＃13;

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

＆＃13;

使用CSS / JS在每行的开头或结尾添加一些内容？

3 个答案: