选择每一行的第一个单词(CSS/JS/Whatever)

Question

我正在尝试选择每个第一个单词,将其包装在特定的范围内.

Lorem ipsum dolor坐下来,精致的adipistur elit.Cras sagittis nunc non nisi venenatis auctor.Aliquam consectetur pretium sapien,eget congue purus egestas nec.Maecenas sed purus ut turpis varius dictum.Praesent a nunc ipsum,id mattis odio.Donec rhoncus posuere bibendum.Fusce法无ELIT,laoreet非posuere.

如果这是文本,脚本应选择Lorem,Aliquam,varius和elit

提前致谢

Answer 1

你可以这样做,通过使用JavaScript将段落中的每个单词包装在自己的跨度中,然后遍历跨度,找出它们在页面上的实际位置,然后将样式更改应用于其Y位置为的跨度.大于前一个跨度.(不过,最好从开始到结束,因为早期的可能会影响后者的包装.)但这对浏览器来说会有很多工作,而且每次窗口都要重复它调整大小,所以效果必须是值得的.

像这样的东西(使用jQuery,因为你jquery在问题上列出了标签,它使代码更简单):

jQuery(function($) {
  var lasty;
  
  var $target = $('#target');
  $target.html(
    "<span>" +
    $target.text().split(/\s/).join("</span> <span>") +
    "</span>");
  lasty = -1;
  $target.find('span').each(function() {
    var $this = $(this),
        top = $this.position().top;
    if (top > lasty) {
      $this.css("fontWeight", "bold");
      lasty = top;
    }
  });
});

实例

当然,这是一个庞大的假设(所有的空白应该用一个空格替换,文本中没有标记,可能是其他空格).但是你明白了.

这是一个处理窗口调整大小的版本,在最后一次调整大小事件发生后50ms(所以我们暂时没有这样做)和Gaby的建议(下面)我们在调整大小开始时展开:

<div id='target' style='width: 20em'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

实例