如何隐藏元素溢出而不裁剪嵌入式图像/文本？

Question

我有一个具有属性的容器div overflow: hidden和max-height100px。此容器元素包含任意数量的内联元素，包括图像和样式化文本。

当前，如果存在超过100像素的内容，则将剪切其余内容。这是我想要的一般行为，除了我一直遇到以下问题：部分文本行被剪切（即，字母的下半部分将被剪切掉）或图像的一半被剪切掉。

我通过手动设置column-width属性找到了解决文本问题的方法，但是我找不到任何阻止图像被裁剪的方法。如果无法在容器div内完整呈现任何文本或图像行，则希望隐藏整个图像/文本行。

总结：我有一个div元素，该元素包装了一系列内联元素（主要是文本和图像），并隐藏了所有溢出内容，并且我不希望显示将裁剪/剪切某些部分的任何文本或图像行。我找到了解决文本问题的方法，但没有解决图片的方法。如何实现所需的功能？

编辑：每个评论者的请求，我张贴我，虽然琐碎，代码：

HTML：

<div id="test">
  <p>
    This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.
  </p>
  <img src="https://hackernoon.com/hn-images/0*xMaFF2hSXpf_kIfG.jpg" alt="Girl in a jacket" width="500" height="600">
</div>

内联元素只是包装在适当标签中的文本和图像（它们的实际值是动态的，并且会根据情况而变化。我在此处提供的内容仅是示例。

CSS：

#test { 
  max-height: 200px;
  max-width:200px;
  overflow: hidden; 
}

这是此示例的JS小提琴。如您所见，图像被裁剪。

这是另一个JS小提琴示例，其中文本本身在行的中间被剪切。

在第一个示例中，我希望图像完全不显示。

在第二个中，我希望最后一行完全不显示。

不能完整显示的元素应该不显示。我在获取图像所需的行为方面特别麻烦，因此特别感谢您的帮助。

Answer 1

您可以使用JavaScript实现所需的行为。在此摘要中，我仅出于说明目的，为“隐藏”的项目提供低透明度。显然，您可以简单地将隐藏项设置为实际应用程序visibility: hidden或display: none在实际应用程序中。

const containers = document.querySelectorAll('.container');
containers.forEach(container => hideOverflow(container));

// Hide all overflowing images and portions of text nodes
function hideOverflow(container) {
  container.childNodes.forEach(node => {
    if (node.nodeName !== '#text') {
      if (node.nodeName === 'IMG' ||
          node.querySelector('img') != null) {
        // Hide entire image if it overflows
        if (node.offsetTop + node.offsetHeight > container.offsetHeight) {
          node.classList.add('hidden');
        }
      }
      else {
        // Hide overflowing text characters
        if (node.offsetTop > container.offsetHeight) {
          node.classList.add('hidden');
        }
        else {
          hideChildOverflow(node, container);
        }
      }
    }
  });
}

// Find all descendant text nodes, and hide their overflowing characters
function hideChildOverflow(node, container) {
  if (node.nodeName === '#text') {
    const overflow = document.createRange();
    overflow.setEnd(node, node.length);
    
    // Shrink range until it includes only overflowing characters
    for (let i = 0; i <= node.length; i++) {
      overflow.setStart(node, i);
      
      if (overflow.getBoundingClientRect().top > container.offsetHeight) {
        break;
      }
    }
    
    // Hide the overflowing characters
    const span = document.createElement('span');
    span.classList.add('hidden');
    overflow.surroundContents(span);
  }
  else {
    node.childNodes.forEach(childNode => {
      hideChildOverflow(childNode, container);
    });
  }
}

body {
  display: flex;
}

.container {
  max-height: 200px;
  max-width: 200px;
  border: 1px solid red;
  margin-right: 20px;
}

.hidden {
  opacity: .2;
}

<div class="container">
  <img src="https://placeimg.com/200/50/tech" width="200" height="50" />
  <p>All of this text is visible, since none of it overflows the container.</p>
  <img src="https://placeimg.com/200/100/tech" width="200" height="100" />
  <p>This text is below the container, so it gets hidden.</p>
</div>

<div class="container">
  <img src="https://placeimg.com/200/100/tech" width="200" height="100" />
  <p>The start of this text is visible, but the last part gets hidden since it overflows the bottom of the container. Any piece of text that overflows, even if only partially, gets hidden.</p>
</div>