1

我有一些我想用省略号隐藏的文本。但是当文本之前的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…&lt;/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">部分具有文本省略号和溢出隐藏作品，滑块的部分不被隐藏也可以正常工作。

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

原始问题的背景：

.block原始代码是我有一个带有滑块的弹出 div，它需要越过溢出 div，但它没有，并且在div 结束时被切断。删除隐藏在.summary-contentdiv 上的溢出使 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…&lt;/p>
    <div class='slider'>slider</div>
  </div>
</div>

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

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

谢谢！

4

2 回答 2

1

只需添加CSSmin-width: 0;。谢谢summary-content 

.summary-content {
    min-width: 0;
    width: 100%;
}
于 2019-04-01T05:37:53.097 回答
0

有 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…&lt;/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>

于 2019-04-01T05:38:00.707 回答