// Function to add span on last word
function spanLastWord(element)
{
var pieces = element.innerHTML.split(" ");
var last = pieces.pop();
var first = pieces.join(" ");
element.innerHTML = first + '<span id=\"lastWord\"> ' + last + '</span>';
}
// Function to position element
function positionElement(){
// Get title
var lastwordContainer = document.getElementById("lastwordContainer");
spanLastWord(lastwordContainer);
// Get last word
var lastWord = document.getElementById("lastWord");
// Get last word position
var rect = lastWord.getBoundingClientRect();
//console.log(rect.top, rect.right, rect.bottom, rect.left);
// Get the div to position
var divLastWord = document.getElementById("divLastWord");
divLastWord.style.top = rect.bottom - 10 + 'px';
divLastWord.style.left = rect.right - 80 + 'px';
}
// event listener to position in cas of resize
window.addEventListener('resize', function(event) {
positionElement();
}, true);
positionElement();
<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>
1条答案
按热度按时间w8f9ii691#
你需要用js做,只有css做不了。