javascript - 如何选择最后一行文本的第一个单词？ (

Question

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

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 完成吗？

这是发生的事情的图片。在第二个示例中，我希望黄线显示在“切片”一词下方。

Answer 1

编辑

这是一个很好的挑战!
需要 4 个循环才能实现您的要求。

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

CodePen

查看代码中的注释(我保留了所有调试控制台.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 所做的方式相同伪元素。

CodePen

$(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>