如何在不裁剪内联图像/文本的情况下隐藏元素溢出？

Question

我有一个容器 div，其属性为 overflow: hidden，max-height 为 100px。此容器元素包含任意数量的内联元素，包括图像和风格化文本。

目前，如果存在超过 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 fiddle。如您所见，图像被裁剪。

这里是another JS Fiddle Example，文本本身在该行的中途被剪裁。

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

第二个，我希望最后一行根本不显示。

不能完整显示的元素不应该显示。我在获取图像所需的这种行为时遇到了特别的麻烦，因此我们将特别感谢您提供的任何帮助。

Answer 1

您可以使用 JavaScript 实现所需的行为。在这个 sn-p 中，出于说明目的，我只是为“隐藏”项目提供了低不透明度。显然，您可以在实际应用程序中简单地将隐藏项设置为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>

Answer 2

如果我理解正确，那么您的组件的逻辑如下：

1）如果您的文字和图片适合高度在 200px 以内，则正常显示。

2)如果文本或图像太大而无法放入 div，则不要显示其中之一。

3）如果文本或图像本身太大而无法放入 div，则不要显示它们中的任何一个。

如果这是正确的，那么您可能需要做的是涉及某种 javascript。

您可以做的是使用 javascript 检查这些段落或图像的高度，然后有条件地应用一些隐藏它们的 css 类。

这是一个使用 Jquery 来检查是否只有段落太高的示例：

if( $('.one-specific-paragraph').height > 200 ){ $('.one-specific-paragraph').addClass('hide-paragraph)};

这就是css类类似于.hide-paragraph{display:none;}的地方

然后对图像做同样的事情。您可能需要在 forEach 循环或类似方法中执行此操作，以便检查每个 div，而不仅仅是一个。

如果您想检查段落和图像的高度，那么您可以执行与上述示例类似的 if 语句，但只需在检查它是否高于 200 像素之前添加两个元素的高度。

希望对您有所帮助。