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

Answer 2

然后为第一行创建一个类。 updated fiddle Html就是这样：

<span class="first-line">Joe Dirt</span><br>

这里有一些奇特的CSS：

.first-line {
    color:red;
}

Answer 3

如果您正在寻找JS方法，这里有一个

$(function(){
  $('p').each(function() {
    var text = $(this).html(); /* get the text */
    splText = text.split('<br>'); /* split it on the line breaks */
    splText[0] = '<span class="firstLine">'+splText[0]+'</span>'; /* add a span to the first line */
    text =  splText.join('<br>'); /* put it back togehter */
    $(this).html( text ); /* put it back in the element */
  });
});

span.firstLine {
  color: red;
}
p:nth-of-type(2) {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
The first line of my paragraph.<br>
Another line.<br>
And another line.<br>
And yet another line.<br>
</p>
<p>
The first line of my paragraph.<br>
Another line.<br>
And another line.<br>
And yet another line.<br>
</p>

Answer 4

你可以使用jQuery。我改变了你的JSFiddle： http://jsfiddle.net/KQgu5/17/

首先，我使用以下命令删除div的第一行：

var $line = $("#address").html().split("<br>")[0];
$("#address").first().contents().first().remove();

其次，我将线条添加回来并围绕它：

$( "#address" ).prepend("<span class='first-line'>" + $line + "</span>");

最后，您要做的就是在CSS中设置第一行样式，如：

.first-line {
  color: red;
}

Answer 5

如果你想动态尝试这样

＆＃13;

Settings

＆＃13;

var elem = document.querySelector("p").innerHTML.split("<br>");
elem[0] = "<span class='myclass'>"+elem[0]+"</span>";
document.querySelector("p").innerHTML = elem.join("<br>");

＆＃13;

.myclass{
  color:blue;
}

＆＃13;

在第一个文本区域之前，在文本区域中设置文本样式

5 个答案: