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

我最近将我的项目从bootstrap3.2.x更新到3.3.2（最新版本），我发现了该元素的一个重要区别

我想在媒体标题中使用special less mixin.text-overflow（）将以下css属性添加到标题中：

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

这在Bootstrap 3.2中运行良好（非常好），您可以在以下plnkr中看到：

但是，由于3.3.x，我不能在标题中使用省略号和文本溢出：

您可以比较下面的图片： 那么，我怎样才能拥有Bootstrap3.3.x中Bootstrap3.2描述的相同行为呢？（例如，它对移动用户非常有用）

更多信息： 在3.3.0中引入了对媒体对象中布局的修改，并对许多用户产生了影响。

---

解决方案是将介质对象（介质、介质体）的大小设置为10000px

它看起来像

显示：表格单元格是导致问题的原因。推翻它应该可以解决问题

.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;
}

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

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

mdo决定在v3*中修复此错误后，我的工作如下：

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

适用于全球使用的浏览器。
我通过在.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>


你的文字太长了
我在3.3.6中通过以下方法解决了这个问题：

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

不幸的是，我在一个最后期限，我不得不使用这个黑客

   <script type="text/javascript">

            (function($) {

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

            })(jQuery);

   </script>


（函数（$）{
$（'.media heading'）.width（$（'.media body'）.width（））；
})（jQuery）；
通过进行此修改，我认为我们“恢复”到3.2.x版的CSS。如果找不到其他解决方案，我将在他们的github上打开一个新问题。。。感谢您的回复，只需返回Bootstrap 3.2.X的属性即可。在我的github项目中查看它：查看这个和这个以了解原因…
display:block
+
width:auto
在Bootstrap3.3.6中似乎无法修复它。我想我们必须看看Bootstrap4才能有一个明确的解决方案。我也有同样的问题。1000px是一个肮脏的黑客，你修复了这个问题吗？不，我们必须添加一些css来恢复3.2版本的行为。您可以在bootstrap github项目中发现这个问题：JavaScript绝对不是一个很好的解决方案，但它可以帮助您解决文本溢出问题。很好用，甚至允许多行省略号。我想你是说换行：打断单词？这解决了我的问题，但OP要求使用
文本溢出：省略号
，与此结合无法实现。如果媒体正文中的内容高度不同，此方法不起作用。
   <script type="text/javascript">

            (function($) {

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

            })(jQuery);

   </script>