Question

我有一些想用省略号隐藏的文本。但是，如果文本前的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">部分具有文本省略号和溢出隐藏作品，并且滑块的一部分也由于不被隐藏而起作用。

这不是一个完整的原始问题，因为我尝试通过上述操作来解决以下问题，但是我无法使溢出省略号适用于所需的文本。

原始问题的背景：

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

文字省略号可用于图像，但是此时没有多余的<div class="description">。问题在于，它是通过关闭滑杆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中显示出来。

谢谢！

Answer 1

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

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

Answer 2

有2个格.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>

溢出：隐藏且省略号在隐藏文字之前不与背景图片配合使用

2 个答案: