css - Bootstrap 3.3.2 中的媒体列表和文本溢出

Question

我最近将我的元素从 Bootstrap 3.2.x 更新到 3.3.2(最新版本)，我发现与 Media Object 的一个重要区别。元素。

我想在媒体标题中使用特殊的 less mixin .text-overflow() 将以下 css 属性添加到标题中:

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

这在 Bootstrap 3.2 中运行良好(非常好)，您可以在以下 plnkr 中看到它:Media-List in 3.2

但是，从 3.3.x 开始，我不能在 header 内使用省略号和文本溢出:Media-List in 3.3.2

你可以对比下图: 那么，我怎样才能在 Bootstrap 3.3.x 中拥有与 Bootstrap 3.2 描述的相同行为？ (例如，它对移动用户非常有用)。

更多信息:在 3.3.0 和 issue was opened (and closed) about this modification 中引入了媒体对象中布局的修改。并对许多用户产生了反响。解决方案是将媒体对象(media、media-body)的大小设置为 10000px。

Answer 1

看起来下面规则中的 display: table-cell; 是导致问题的原因。覆盖它应该可以解决问题。

.media-left, .media-right, .media-body {
  display: table-cell; /* Here is the issue */
  vertical-align: top;
}

添加下面的代码片段似乎可以恢复 3.2 的功能，但谁知道这可能会导致 3.3.1 代码出现其他问题...

.media-left, .media-right, .media-body {
  display: block;
}

此外，这不适用于最新版本(当前为 3.3.2)，因为 .media-body 的宽度出于某种原因设置为 10000px...将其更改为 width: auto 加上上面的更改似乎可以在 3.3.2 上运行。但同样，我不知道这可能会产生什么其他问题。

.media-body {
  width: 10000px;
}