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 开始，我不能在标题中使用省略号和文本溢出：Media-List in 3.3.2

您可以比较下图： 那么，我怎样才能在 Bootstrap 3.3.x 中拥有我用 Bootstrap 3.2 描述的相同行为？ （例如对移动用户非常有用）。

更多信息： 媒体对象布局的修改是在 3.3.0 和issue was opened (and closed) about this modification 中引入的，对许多用户产生了反响。 解决方案是将媒体对象（媒体、媒体主体）的大小设置为 10000 像素。

Answer 1

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

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

添加下面的sn-p似乎恢复了3.2的功能，但谁知道这可能与3.3.1代码产生的其他问题......

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

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

.media-body {
  width: 10000px;
}

Answer 2

我遇到了同样的问题并通过以下方式解决了问题：

.media-heading,
.media-body > p, 
.media-body > span {
    word-break: break-word;
}

Answer 3

在 mdo 决定 NOT 修复 v3* 中的这个错误之后，我的工作就在这里：

.media-heading, .media-body > p, .media-body > span {
    word-break: break-all;
}

适用于92.19% 的全球使用的浏览器。

Answer 4

我通过在 .media-body 中添加另一个容器解决了这个问题

.media-body{
  width: 10000px;
  position: relative; //media body width overflow fix
}
//media body width overflow fix 
.media-body__width-fix {
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

这样使用：

<div class="media-body">
    <div class="media-body__width-fix">
      <div class="your-ellipsis-overflow-class">your too long text</div>
    </div>
</div>

Answer 5

我在 3.3.6 中通过以下方式解决了这个问题：

<div class="media-body">
   ...
   <div class="ellipsis-fix">
      <div class="ellipsis-content">
         Some long line here...
   </div>
</div>

CSS：

.ellipsis-fix {
    height: 1.5em; // set the line height you want here
    position: relative;
}
.ellipsis-content {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

Answer 6

不幸的是，因为我在最后期限内，我不得不使用这个 hack。

   <script type="text/javascript">

            (function($) {

                $('.media-heading').width($('.media-body').width());

            })(jQuery);

   </script>