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:

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

I am having trouble viewing an image on my screen

What is preventing the element from being positioned at the bottom of the container?

Align a component vertically in a FlexBox using Material UI

Can a shape similar to an inverted circle be created using CSS and jQuery?

Unable to display background image and color on Internet Explorer

What is the best way to execute a function in JavaScript and have it return the output as an image

retrieve all the table data cells except for the initial one

Concealing a form after submission using JavaScript

Splitting your screen in a 10/90 column ratio using React

Implementing modifications to all HTML elements simultaneously

The AppBar is consuming space and obstructing other elements on the

Hiding content in HTML with the Display:none property

Using percentages for CSS alignment and adjusting element widths

troubles with compatibility between bootstrap.css and IE11

Is it possible to extract my current location from one website and then access another website based on that location?

XMLWorker: unable to align cell vertically properly

Which web browser(s) can properly display the CSS property display: run-in?

Switch button while moving cursor

Embedding an Iframe in the Main URL

Assistance with changing styles