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

Question

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

使用::first-line 可以工作，当在移动设备上查看时，不会考虑流到第二行的最后一个词/词。

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

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

谢谢

Answer 1

您可以使用纯 javascript 在 span 中的第一个 br 之前包装文本。

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>