如何在特定的文本行上选择和应用样式? 喜欢 CSS pseudo-element :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
});
基本上,我们用跨度包装每个单词,并在窗口调整大小时根据跨度的位置添加一个类。我确信它可以更有效地完成,但它可以作为概念证明。当然,对于偶数/奇数行,你可以简化代码。
边缘情况:我没有在类更改单词的大小或宽度的地方测试它。最终可能会大错特错。
它正在运行:https://jsbin.com/piwizateni/1/edit?html,css,js,output
关于javascript - 如何选择第 n 行文本 (CSS/JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1966441/