如何选择最后一行文字的第一个单词？(<h1> - <h6>,<p>元素)

Question

我需要在我正在构建的网站上的每个h1-h6元素下添加一条水平线.我目前正在添加一个after元素:

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  color: #000;
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 800;
  color: #333;
  display: inline-block;
  position: relative;
  text-rendering: optimizeLegibility;
  font-family: $altfont;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    width: 60px;
    height: 4px;
    background-color: $yellow;
  }
}

我还有一个小的jQuery函数,以确保after元素总是低于元素20px:

$(function () {
    $('h1, h2, h3, h4, h5, h6').each(function () {

            x = parseInt($(this).css('font-size'));
            $(this).css('line-height', (x + 20) + 'px');

    });
});

如果h1左侧有文本对齐,则此方法有效 - 当文本换行为2行或更多行时,after元素将显示在最后一行的第一个单词下.

问题是,如果文本居中对齐或右对齐,则after元素将显示在h1元素下,但不会显示在最后一行的第一个单词下.这是可以用JS/JQuery完成的吗？

这是一张发生了什么的照片.在第二个例子中,我希望黄色线显示在"Slice"一词下面.

Answer 1

编辑

这是一个很好的挑战！
需要4次循环才能达到你的要求。

1. span在每个单词上添加一个。
2. 找到span最后一行的偏移量。
3. 删除除最后一行之外的所有行上的跨度。
4. 删除除第一个单词之外的所有单词上的跨度。

代码笔

查看代码中的注释（我留下了所有调试console.logs）。

$(function () {
  $('h1, h2, h3, h4, h5, h6').each(function () {

    x = parseInt($(this).css('font-size'));
    $(this).css('line-height', (x + 20) + 'px');

    findWord($(this));

  });

  function findWord(el){

    // Get the word array.
    var wordArr = el.html().split(" ");

    // Cycle words to add span on each words.
    for(i=0;i<wordArr.length;i++){
      console.log(wordArr[i]);
      wordArr[i] = "<span class='underliner'>"+wordArr[i]+"</span>";
    }

    // Update HTML.
    el.html(wordArr.join(" "));

    // Find the offset of the last line.
    var biggestOffset=0;
    el.find(".underliner").each(function(){
      console.log($(this).offset().top);
      if($(this).offset().top>biggestOffset){
        biggestOffset=$(this).offset().top;
      }
    });

    console.log("biggestOffset: "+biggestOffset);

    // Remove span on NOT the last line
    el.find(".underliner").each(function(){
      if($(this).offset().top<biggestOffset){
        $(this).replaceWith($(this).html());
      }
    });

    // On the last line, remove all spans except on the first word
    el.find(".underliner").not(":eq(0)").each(function(){
      $(this).replaceWith($(this).html());
    });
  }
});

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  color: #000;
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 800;
  /*color: #333;*/
  display: inline-block;
  position: relative;
  text-rendering: optimizeLegibility;
  font-family: $altfont;
  position: relative;
  
  text-align:center;  /* ADDED */
  
  /* REMOVED */
  /*&:after {
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    width: 60px;
    height: 4px;
    background-color: &yellow;
  }*/
}

.underliner{
  text-decoration:underline;
  text-decoration-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>This is a quite long H1 that will certainly wrap</h1>
<h2>This is a quite long H2 that will certainly wrap</h2>
<h3>This is a quite long H3 that will certainly wrap</h3>
<h4>This is a quite long H4 that will certainly wrap</h4>
<h5>This is a quite long H5 that will certainly wrap</h5>
<h6>This is a quite long H6 that will certainly wrap</h6>

第一个答案
（误读了问题...）


既然你已经使用了 jQuery...

您可以添加$(this).append($("<div class='smallBar'>").css({"top":x+10}))到脚本中...
并使用 CSS 来定义，smallBar就像您对after伪元素所做的那样。

代码笔

$(function () {
  $('h1, h2, h3, h4, h5, h6').each(function () {

    x = parseInt($(this).css('font-size'));
    $(this).css('line-height', (x + 20) + 'px');
    $(this).append($("<div class='smallBar'>").css({"top":x+10}))

  });
});

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  color: #000;
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 800;
  /*color: #333;*/
  display: inline-block;
  position: relative;
  text-rendering: optimizeLegibility;
  font-family: $altfont;
  position: relative;
  /*&:after {
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    width: 60px;
    height: 4px;
    background-color: &yellow;
  }*/
}
.smallBar{
  position: absolute;
    top:0;
    left:0;
    width: 60px;
    height: 4px;
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>This is a quite long H1 that will certainly wrap</h1>
<h2>This is a quite long H2 that will certainly wrap</h2>
<h3>This is a quite long H3 that will certainly wrap</h3>
<h4>This is a quite long H4 that will certainly wrap</h4>
<h5>This is a quite long H5 that will certainly wrap</h5>
<h6>This is a quite long H6 that will certainly wrap</h6>