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

Question

I need to add a little horizontal line under each of the h1 - h6 elements on the site I am building. I am currently adding an after element:

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;
  }
}

I also have a small jQuery function to make sure that the after element is always 20px below the element:

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

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

    });
});

this works if the h1 has text-align left - when the text wraps into 2 or more lines, the after element will show up under the first word of the last line.

The problem is, if the text is center aligned, or right aligned, the after element will show up under the h1 element but not under the first word of the last line. Is this something that can be done with JS/JQuery?

Here is a pic of what happens. In the second example, I would like the yellow line to show up under the word "Slice".

Answer 1

EDIT

This was a nice challenge!
It takes 4 loops to achieve what you ask.

1. To add a span on each words.
2. To find the offset of the span on the last line.
3. To remove spans on all lines except the last.
4. To remove spans on all words except the first.

CodePen

See comments in code (I left all my debugging 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> 

---

First answer
(misread the question...)


Since you already use jQuery...

You can add $(this).append($("<div class='smallBar'>").css({"top":x+10})) to the script...
And use CSS to define smallBar the same way you did for the after pseudo element.

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> 

Answer 2

My algorithm of finding and highlighting first word of last line:

1. Iterate through elements.
2. Get element's text ( innerText ).
3. Split text by whitespace (" ") sign.
4. Remove all elements from block.
5. Add span s with words and whitespace text nodes (also save this span s to array).
6. Sort this array by span with the highest top and lowest left of span 's rectangle.
7. Add highlighting class to the top element of this array.

 highlightFirstWordOfLastLineForHeaders(); /* apply highlighting on window resize */ window.addEventListener("resize", highlightFirstWordOfLastLineForHeaders); /* Peforms highlightFirstWordOfLastLine call for every header element */ function highlightFirstWordOfLastLineForHeaders() { var elements = document.querySelectorAll("h1, h2, h3, h4, h5, h6"); for (var i = 0; i < elements.length; i++) { highlightFirstWordOfLastLine(elements[i]); } } /* Peforms highlighting for single element */ function highlightFirstWordOfLastLine(element) { var text = element.innerText.trim(); /* get words list */ var words = text.split(" "); /* removing all elements */ while (element.firstChild) { element.removeChild(element.firstChild); } var spanArray = []; /* add spans with words and whitespaces */ for (var i = 0; i < words.length; i++) { /* append span with word */ var span = document.createElement("span"); span.appendChild(document.createTextNode(words[i])); element.appendChild(span); /* append whitespace */ element.appendChild(document.createTextNode(" ")); /* save span element to array */ spanArray.push(span); } /* sorting by highest top and lowest left */ spanArray.sort(function(a, b) { var rectA = a.getBoundingClientRect(); var rectB = b.getBoundingClientRect(); var deltaTop = rectB.top - rectA.top; /* if differense is less then 1px */ if (Math.abs(deltaTop) < 1) { return rectA.left - rectB.left; } return deltaTop; }); /* appending highlighting to fist word of last line */ spanArray[0].classList.add("selected"); } 

 .selected { border-bottom: 2px solid yellow; } 

 <h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices porta nibh, eu semper massa ullamcorper et. </h1> <h2> Curabitur in venenatis sapien. Nullam cursus ante ac enim dapibus, a egestas tellus mollis. </h2> <h3> Aenean tincidunt ligula et egestas suscipit. Proin euismod felis leo, egestas porta purus porta vitae. Morbi ut pulvinar quam, eu accumsan eros. Duis tristique pretium imperdiet. Integer nunc odio, consectetur vel leo vel, posuere venenatis nunc. Vestibulum sit amet arcu sit amet tortor faucibus maximus in id massa. Praesent vulputate, tellus nec aliquam tempor, ipsum erat tincidunt est, sit amet cursus turpis dui ac ipsum. Duis nec odio in felis aliquet sagittis sit amet in leo. Suspendisse potenti. Curabitur vitae sagittis diam. Duis id lectus cursus purus ultricies sollicitudin. Phasellus a ex sit amet eros lacinia fringilla sit amet sit amet sem. Proin luctus ornare risus at volutpat. Aliquam eleifend porttitor nulla. Sed facilisis mattis felis ut sodales. </h3> <h4> Quisque quis ultricies arcu. Aliquam feugiat non ipsum quis malesuada. Suspendisse ullamcorper, eros ut maximus hendrerit, sem velit lobortis turpis, non tristique justo magna eu nulla. Vestibulum maximus auctor ipsum sit amet finibus. Etiam commodo iaculis sem, vitae tincidunt libero. Phasellus lacus quam, semper ut pulvinar sed, accumsan a arcu. Suspendisse nulla velit, rhoncus id porttitor at, dictum ac ante. Sed eleifend vitae quam eget pretium. </h4> <h5> Duis semper rhoncus ultrices. Aliquam id elit nec quam fringilla gravida ac sed nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem leo, rhoncus quis nulla eget, posuere pellentesque leo. Nam in nisi sit amet sem consequat sodales. Quisque leo urna, aliquet eu malesuada at, laoreet et lorem. Fusce est neque, fringilla id ex id, semper tincidunt mauris. Aliquam erat volutpat. Vestibulum sodales sodales tincidunt. Pellentesque elementum quis neque vel malesuada. Nulla non scelerisque enim, ut posuere tortor. Fusce vel neque tristique ipsum aliquet mattis at sed sapien. </h5> <h6> Praesent scelerisque magna libero, vitae commodo purus tincidunt in. Etiam placerat diam turpis, sit amet iaculis eros efficitur at. Sed porta, dui non condimentum vestibulum, libero enim cursus nibh, eu luctus ligula ante sed neque. Duis vestibulum lacus felis, at iaculis tellus malesuada at. Donec vehicula lacinia metus. Pellentesque non efficitur lectus. Etiam et consectetur massa. Proin et leo cursus, convallis diam sit amet, mattis arcu. Fusce posuere pharetra leo eget volutpat. Maecenas et posuere urna. Nullam a dolor eu ipsum placerat rhoncus. In cursus, mauris ut pulvinar pellentesque, diam orci facilisis ante, at sollicitudin libero turpis in libero. In maximus est eu nisl venenatis ultrices. </h6> 

You can also see how it works with window resizing via jsFiddle .

Answer 3

Although not tested this logic makes sense.

Write some JS that looks up the size of the h1, if the size of the h1 is greater than X which would be the size the h1 is with perhaps a little added on top for good measure.

Then add styling to the h1 with and :after pseudo class that appears bottom:0 left:0. this will however mean your text will have to be aligned left instead of center.

When the h1 wraps onto 2 lines the h1 size essentially doubles which will then cause the if statement to fire and add the styling to the text. This is the closest answer I have to perfect for you I apologise if you require the text to be central.

EDIT: Example code of above .

Now I can't say this will work but here is some basic code around based on the previously explained method. Im not amazing with javascript so you will more than likely need to build on. But at least this gives you a starting point I hope...

JS

$(document).ready(function() {
var h1Height = document.getElementsByTagName("h1").offsetHeight;

function firstH1Wrap() {
    if (h1Height < /*line-height+5px*/){
        document.getElementsByTagName("h1").addClass('hide-line');
    } else {
        document.getElementsByTagName("h1").removeClass('hide-line');
    }
}
});

$(window).resize(firstH1Wrap).trigger('resize')

CSS

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-align: left;
    text-rendering: optimizeLegibility;
    font-family: $altfont;
    position: relative;
}

h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    width: 60px;
    height: 4px;
    background-color: $yellow;
    display: block;
}

h1.hide-line:after, h2.hide-line:after, h3.hide-line:after, h4.hide-line:after, h5.hide-line:after, h6.hide-line:after {
    display: none;
}

If you was to set the line height of all the Headings 1-6 the same you could run the same function for all of them as they have the same sizing, if you don't then you'll need to declare a new variable for each of the headings and build it into the function or make new ones.

Answer 4

This is not possible to fix based on the way you wrote the code. But I think I have a solution if you are willing to change a few things. My method will only work if you know the font-size property of the element you are addressing.

UPDATED CSS

h1 {
  font-size: 24px; /* ADDED */
  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;
      top: 24px; /* FONT SIZE = DISTANCE */
      left:0;
      width: 60px;
      height: 4px;
      background-color: $yellow;
  }
}

This should work however it is untested.

It works by knowing the font-size and then using that value as a top margin. So it will always be in the same location regardless in the text alignment changes.

EDIT: I now understand what you would like to accomplish.

This is very difficult to do because the line could be in many different locations. The only solution I can think of from the top of my head is:

Media Queries

You would need to create a breakpoint anytime and everytime the text wraps or the first word of the last line moves.

Answer 5

var text = $(this:last).text().trim().split(" ");
var last = text.pop();
$( this:last).html(text.join(" ") + (text.length > 0 ? " <span class='lastWord'>" + last + "</span>" : last));
};

And in the CSS add this

 .lastWord{text-decoration:underline;}

Answer 6

just put a

top:'whatever is line-height + 20px'

to the :after element (and remove bottom)

edit:nm i missed the ' I would like the yellow line to show up under the word "Slice".' part