CSS:如何将div的位置与h4元素的最后一个单词的位置关联起来

ha5z0ras  于 2022-12-24  发布在  其他
关注(0)|答案(1)|浏览(107)

我需要在一个h4文本元素的末尾设置一个div的位置,如果h4在一行上,那么我就成功了,但问题是当文本超过两行时,因为我的div会到达第一行宽度的末尾,而不是第二行的最后一个单词。
是否可以将div的位置与h4元素的最后一个单词的位置关联起来?(So 如果它在两行上,它总是接近最后一个单词)
在所附的图片中,我试图更好地解释它:我必须执行解决方案“B”.

w8f9ii69

w8f9ii691#

你需要用js做,只有css做不了。

// 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();
#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>

相关问题