使用JavaScript 選擇特定文字行
我們如何設定特定文字行的樣式，類似於:first-line CSS 偽元素，而對 CSS 偽元素，而可能不將其限制為僅第一行？
雖然僅 CSS 不足以完成此任務，但 JavaScript 提供了解決方案。
JavaScript 實作：
我們可以使用JavaScript 將每個單字包裝在一個span 元素中：
$(function(){
var p = $('p');
var words = p.text().split(' ');
var text = '';
$.each(words, function(i, w){
if($.trim(w)) text = text + '<span>' + w + '</span> ' }
); //each word
p.html(text);
為了確定每個span的行號，我們使用Window 的resize 事件來計算每個span 的垂直位置：
$(window).resize(function(){
var line = 0;
var prevTop = -15;
$('span', p).each(function(){
var word = $(this);
var top = word.offset().top;
if(top!=prevTop){
prevTop=top;
line++;
}
word.attr('class', 'line' + line);
});//each
});//resize
突出顯示偶數/奇數行：
要突出顯示偶數/奇數行，程式碼可以簡化為：
$(window).resize(function(){
$('span', p).each(function(){
var word = $(this);
var top = word.offset().top;
var line = Math.floor(top / 20);
word.attr('class', (line % 2 == 0 ? 'even' : 'odd'));
});//each
});//resize
注意事項:
此方法假設單字不會在同一行內換行，且類別中的變更可能會影響單字的大小或寬度。
範例：
[點擊此處](https://jsbin.com/piwizateni/1/edit?html,css,js,output) 進行工作演示。
以上是JavaScript 如何像 CSS 的 `:first-line` 一樣為任意行設定特定文字行的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
