溢出：隐藏和省略号在要隐藏的文本之前不与背景图像一起使用答案

【问题标题】：overflow: hidden and ellipsis not working with background-image before text to hide溢出：隐藏和省略号在要隐藏的文本之前不与背景图像一起使用
【发布时间】：2019-08-22 05:33:43
【问题描述】：

我想用省略号隐藏一些文本。但是当文本前的div中有背景图片时，就不行了，https://jsfiddle.net/ypbgkrod/6/，

.block {
  display: flex;
  margin-top: 0.3em;
}

.summary-content {
  margin-left: 0.2rem;
  width: 100%;
}

.summary-content .description {
  overflow: hidden;
  width: 100%;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="block">
  <div class="thumbnail">
    <div class="thumb" role="img" style="background-image: url(''); height: 73px; width: 130px;"></div>
  </div>
  <div class="summary-content" data-permlink="i-want-more-of-my-life">
    <div class="description">
      <p class="ellipsis">Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…</p>
    </div>
    <div class='slider'>
      Need this to not overflow hide. Need this to not overflow hide. Need this to not overflow hide.
    </div>
  </div>
</div>

删除<div class="thumbnail"> 部分有文本省略号和溢出隐藏作品，滑块的部分不被隐藏也能正常工作。

这不是完整的原始问题，因为我试图通过执行上述操作来解决下面的问题，但我无法让溢出省略号处理所需的文本。

原始问题的背景：

原始代码是我有一个带有滑块的弹出 div，它需要越过溢出 div，但它没有，并且在 .block div 结束时被切断。删除隐藏在 .summary-content div 上的溢出会使 Slider 完全弹出，但省略号不起作用。

文本省略号与图像一起使用，但此时没有额外的<div class="description">。问题是它切断了 Slider div，溢出隐藏在滑块所在的 summary-content div 上。

.block {
  display: flex;
  margin-top: 0.3em;
}

.summary-content {
  margin-left: 0.2rem;
  width: 100%;
  overflow: hidden;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="block">
  <div class="thumbnail">
    <div class="thumb" role="img" style="background-image: url(''); height: 73px; width: 130px;"></div>
  </div>
  <div class="summary-content" data-permlink="i-want-more-of-my-life">
    <p class="ellipsis">Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…</p>
    <div class='slider'>slider</div>
  </div>
</div>

所以当我为<p class="ellipsis"> 添加额外的封装（描述）时，<div class='slider'> 不再被隐藏，但省略号不起作用。我只是想让您知道，当我没有 description div 时，省略号不工作已解决，但溢出隐藏了 summary-content div 内的 Slider 弹出窗口的一部分，我不能拥有那个。

如果您可以获得第一个 HTML 和 CSS 来隐藏省略号文本上的溢出，而不是应用于滑块，那将是我正在寻找的解决方案，因为代码的第二部分没有显示整个问题完全让问题出现在 jsfiddle 中。

谢谢！

【问题讨论】：

在第一个代码中将min-width: 0添加到summary-itemjsfiddle.net/pr2zhj58
谢谢 :) 由于您比其他答案早 2 分钟回答，请输入您的答案以接收接受的答案。谢谢！
Np，您可以标记以下任何答案，很高兴我能提供帮助:)

标签： html css flexbox

【解决方案1】：

只需在summary-content CSS 中添加min-width: 0;。谢谢

.summary-content {
    min-width: 0;
    width: 100%;
}

【讨论】：

【解决方案2】：

有 2 个 div .thumbnail 和 .summary-content。如果您将摘要内容的宽度设置为 100%，那么它将离开屏幕，所以我添加了下面的 CSS

.summary-content {
  width: 80%;
}

.block {
  display: flex;
}

.summary-content {
  width: 80%;
}

.summary-content .description {
  overflow: hidden;
  width: 100%;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="block">
  <div class="thumbnail">
    <div class="thumb" role="img" style="background-image: url(''); height: 73px; width: 130px;"></div>
  </div>
  <div class="summary-content" data-permlink="i-want-more-of-my-life">
    <div class="description">
      <p class="ellipsis">Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…</p>
    </div>
    <div class='slider'>
    Need this to not overflow hide. Need this to not overflow hide. Need this to not overflow hide.
    </div>
  </div>
</div>

【讨论】：