如何在特定的文本行上选择和应用样式?类似于CSS伪元素:first-line,但是我想选择任何一行,但不仅限于第一行。
似乎不能仅使用CSS来完成…总之,我不介意JS解决方案。
更新:
好吧,实际上这只是出于兴趣。我正在尝试实现诸如突出显示段落的每个偶数行(以提高可读性,就像每个人对表行所做的事情一样)…
预格式化文本,例如:
<p> <span class='line1'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </span> <span class='line2'>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </span> <span class='line3'>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </span> <span class='line4'>ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </span> <span class='line5'>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur </span> <span class='line6'>sint occaecat cupidatat non proident, sunt in culpa qui officia </span> <span class='line7'>deserunt mollit anim id est laborum.</span> </p>
…对我来说还可以,但是如何知道在哪里拆分呢?即使给出段落的宽度,仍然很难确定…
有趣。您可以使用JavaScript执行类似的操作:
$(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); $(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(); //first one });
基本上,每当窗口调整大小时,我们就用一个跨距包裹每个单词,并根据跨距的位置添加一个类。我相信它可以更有效地完成,但是可以作为概念证明。当然,对于偶数/奇数行,您可以简化代码。
边缘案例:我没有在类更改单词的大小或宽度的地方进行测试。它可能最终会非常错误。