如何在不裁剪内联 images/text 的情况下隐藏元素溢出？

Question

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

目前，如果存在超过 100 像素的内容，则会剪裁其余内容。这是我想要的一般行为，除了我将运行保留在文本行的部分被剪裁（即字母的下半部分将被剪掉）或图像的一半将被剪掉的问题中。

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

总结： 我有一个 div 元素，它包装了一堆内联元素（主要是文本和图像）并隐藏了任何溢出，我不想显示它会 crop/clip 某些部分的任何文本或图像行。我找到了解决文本问题的方法，但没有找到图像问题的解决方法。我怎样才能实现我想要的功能？

编辑：根据评论者的要求，我发布了我的代码：

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

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

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

2)如果文本或图像太大而不适合div，则不显示其中之一。

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

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

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

这里有一个 Jquery 的示例，用于检查是否只有段落太高：

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

这是 css class 类似于 .hide-paragraph{display:none;}

的地方

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

如果您想检查段落和图像的高度，那么您可以对上面的示例执行类似的 if 语句，但只需添加两个元素的高度，然后再检查它是否超过 200 像素。

希望对您有所帮助。

Answer 2

您可以使用 JavaScript 实现所需的行为。在此代码段中，为了便于说明，我只是为 "hidden" 项设置了低不透明度。显然，您可以在实际应用程序中简单地将隐藏项设置为 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>

如何在不裁剪内联 images/text 的情况下隐藏元素溢出？

How to hide element overflow without cropping inline images/text?

html

css

overflow

crop

hidden