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

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

更多信息： 媒体对象中布局的修改在3.3.0和issue was opened (and closed) about this modification中引入，并对许多用户产生了影响。解决方案是将媒体对象（媒体，媒体）的大小设置为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;
}

Answer 2

我通过在.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 3

我遇到了同样的问题，并解决了这个问题：

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

Answer 4

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

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

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

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>

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

6 个答案: