Using CSS to align the position of a div with the last word position of an h4 element

Question

Using CSS to align the position of a div with the last word position of an h4 element

Trying to figure out how to position a div at the end of an h4 text element has been challenging. When the h4 text is on a single line, it's easy to place the div correctly. However, things get complicated when the text spans multiple lines. In that case, the div ends up at the width of the first line instead of next to the last word on the second line.

Is there a way to align the position of the div with the last word of the h4 element? This way, even if the text wraps onto two lines, the div will always be close to the last word.

I've attached an image to better illustrate what I'm trying to achieve: I need to implement solution "B." Here's the link to the image for reference: https://i.sstatic.net/uZNpi.png

html css text position

Answer 1

Answer №1

In order to achieve this effect, JavaScript is necessary as CSS alone will not suffice.

// Custom function to insert span around last word
function wrapLastWord(element)
{
    var words = element.innerHTML.split(" ");
    var lastWord = words.pop();
    var theRest = words.join(" ");
    element.innerHTML = theRest + '<span id=\"lastWord\"> ' + lastWord + '</span>';
}

// Function to position the element
function positionElement(){
  // Get container element
  var lastwordContainer = document.getElementById("lastwordContainer");
  wrapLastWord(lastwordContainer);

  // Get the last word 
  var lastWord = document.getElementById("lastWord");

  // Get position of the last word
  var rect = lastWord.getBoundingClientRect();

  // Calculate position for the div 
  var divLastWord = document.getElementById("divLastWord");
  divLastWord.style.top = rect.bottom - 10 + 'px';
  divLastWord.style.left = rect.right - 80 + 'px';
}
// Add event listener for dynamic positioning on window resize
window.addEventListener('resize', function(event) {

  positionElement();

}, true);

positionElement();

#divLastWord{
  border: 2px solid yellow;
  position: absolute;
}

<h4 id="lastwordContainer" class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut odio arcu. Aenean augue massa, placerat fermentum consectetur sit amet, pulvinar nec mi. Mauris velit tellus, posuere nec cursus ut, mattis ut orci. Maecenas tincidunt tellus quis orci finibus tristique. Suspendisse tristique augue ultrices leo tristique ultrices. Vestibulum semper lacinia pulvinar. Pellentesque dignissim nunc in vulputate bibendum. Praesent risus nibh, suscipit ac blandit a, rhoncus vel sem. Cras interdum fermentum augue eget pellentesque. Integer velit massa, cursus in volutpat cursus, iaculis ac elit. In quis ex dui. Ut a tellus erat. Nam fermentum id elit eu tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a ultricies arcu, et hendrerit nunc. Pellentesque vitae dignissim arcu, ut aliquam nibh.</h4>
<div id="divLastWord">I am on the last word</div>

Answer 2

In order to achieve this effect, JavaScript is necessary as CSS alone will not suffice.

// Custom function to insert span around last word
function wrapLastWord(element)
{
    var words = element.innerHTML.split(" ");
    var lastWord = words.pop();
    var theRest = words.join(" ");
    element.innerHTML = theRest + '<span id=\"lastWord\"> ' + lastWord + '</span>';
}

// Function to position the element
function positionElement(){
  // Get container element
  var lastwordContainer = document.getElementById("lastwordContainer");
  wrapLastWord(lastwordContainer);

  // Get the last word 
  var lastWord = document.getElementById("lastWord");

  // Get position of the last word
  var rect = lastWord.getBoundingClientRect();

  // Calculate position for the div 
  var divLastWord = document.getElementById("divLastWord");
  divLastWord.style.top = rect.bottom - 10 + 'px';
  divLastWord.style.left = rect.right - 80 + 'px';
}
// Add event listener for dynamic positioning on window resize
window.addEventListener('resize', function(event) {

  positionElement();

}, true);

positionElement();

#divLastWord{
  border: 2px solid yellow;
  position: absolute;
}

<h4 id="lastwordContainer" class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut odio arcu. Aenean augue massa, placerat fermentum consectetur sit amet, pulvinar nec mi. Mauris velit tellus, posuere nec cursus ut, mattis ut orci. Maecenas tincidunt tellus quis orci finibus tristique. Suspendisse tristique augue ultrices leo tristique ultrices. Vestibulum semper lacinia pulvinar. Pellentesque dignissim nunc in vulputate bibendum. Praesent risus nibh, suscipit ac blandit a, rhoncus vel sem. Cras interdum fermentum augue eget pellentesque. Integer velit massa, cursus in volutpat cursus, iaculis ac elit. In quis ex dui. Ut a tellus erat. Nam fermentum id elit eu tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a ultricies arcu, et hendrerit nunc. Pellentesque vitae dignissim arcu, ut aliquam nibh.</h4>
<div id="divLastWord">I am on the last word</div>

Using CSS to align the position of a div with the last word position of an h4 element

Answer №1

Similar questions

Executing PHP Code with an External JavaScript File in an HTML Document

What is the meaning of this CSS acronym?

adjust the size of a form field to match the background image dimensions

Leveraging MUI v5 sx Prop for Applying Various CSS Properties Simultaneously (such as margin, border-radius, and more)

Every time I adjust the browser height on my landing page, the elements start to overlap each other

What is the method for adding a tag within a specific div ID in ExtJS?

What is the most effective method for resetting the scroll position of a browser when refreshing a page?

Ways to boost an array index in JavaScript

What steps can I take to guarantee that a select change event occurs following the setting of ngmodel in Angular2?

Is there a way to extract just the src attribute from an Image tag using PHP?

Output each uploaded file using jQuery's console.log function

My Django function doesn't get triggered by the form submission using post method

The CSS styling is not being rendered correctly on the AngularJS HTML page

Which slider was featured in the unity3d.com/5 website?

Incorporating a closing screen into a game built with Canvas and jQuery

Ways to implement a 'Delete' feature in a PHP audio tag player

Guide on submitting a multi-step form using jQuery

What methods can I use to toggle between different divs using navigation buttons?

Tips for positioning your side navigation menu parallel to the page edge

Responsive Bootstrap 4 Login Form with customized top height