javascript - 在第一个<br>之前的文本区域中设置文本样式

如何设置文本区域的第一行直到第一个换行符的样式？

使用:: first-line可能有效，当在移动设备上查看时，流向第二行的最后一个/多个单词将不被考虑。

<p>
The first line of my paragraph.<br>
Another line.<br>
And another line.<br>
And yet another line.<br>
</p>

我希望在这里找到解决方案，但是没有运气。
JSFiddle

谢谢

最佳答案

您可以使用普通javascript在br中的第一个span之前换行。

var address = document.getElementById('address');
var content = address.innerHTML.split('<br>');
content[0] = '<span class="red">' + content[0] + '</span>';

address.innerHTML = content.join('<br>');

.red {
  color: red;
}

<div id="address">
  Joe Dirt<br>
  PO Box 842<br>
  New York NY 10012<br>
  800-555-5555<br>
  <br>
</div>

更新：对于多个元素，可以使用querySelectorAll，然后循环每个元素并添加span。

var address = document.querySelectorAll('.address');

[...address].forEach(function(e) {
  var content = e.innerHTML.split('<br>');
  content[0] = '<span class="red">' + content[0] + '</span>';
  e.innerHTML = content.join('<br>');
})

.red {
  color: red;
}

<div class="address">
  Joe Dirt<br> PO Box 842<br> New York NY 10012<br> 800-555-5555<br><br>
</div>

<div class="address">
  Joe Dirt<br> PO Box 842<br> New York NY 10012<br> 800-555-5555<br><br>
</div>

<div class="address">
  Joe Dirt<br> PO Box 842<br> New York NY 10012<br> 800-555-5555<br><br>
</div>

关于javascript - 在第一个<br>之前的文本区域中设置文本样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46707776/