如何在图像上显示文本，并在文本溢出时向上排列？

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="text-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, lorem et aliquam tincidunt, nunc nunc aliquet nunc, nec aliquam nunc nunc auctor.</p>
  </div>
</div>

.image-container {
  position: relative;
  width: 400px;
  height: 300px;
}

.text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

$(document).ready(function() {
  var textContainer = $('.text-container');
  var textHeight = textContainer.height();
  var contentHeight = textContainer.find('p').height();
  
  if (contentHeight > textHeight) {
    textContainer.css('top', -(contentHeight - textHeight) + 'px');
  }
});