Bootstrap 3.3.2中的Media-List和Text-Overflow [英] Media-List and Text-Overflow in Bootstrap 3.3.2

问题描述

我最近将项目从Bootstrap 3.2.x更新到3.3.2（最新版本），并且发现与并产生了影响对于许多用户。
解决方案是将媒体对象（媒体，媒体主体）的大小设置为10000px。

解决方案

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

  .media-body {
 width：10000px; 
职位：相对； //媒体正文宽度溢出修复
} 
 //媒体正文宽度溢出修复
 .media-body__width-fix {
 position：absolute;剩余
：0： 
对：0; 
 top：0; 
 bottom：0; 
} 
  

使用如下：

 < div class = media-body> 
< div class = media-body__width-fix> 
< div class = your-ellipsis-overflow-class>您的文字太长< / div> 
< / div> 
< / div> 
  

I recently update my project from Bootstrap 3.2.x to 3.3.2 (last release) and I discover an important difference with the Media Object element.

I want to use in the media-heading the special less mixin .text-overflow() to add the following css attribute to the title :

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

That works well (very well) in Bootstrap 3.2, you can see it in the following plnkr : Media-List in 3.2

But, since 3.3.x I can't use ellipsis and text-overflow inside header : Media-List in 3.3.2

You can compare the picture below : So, how can I have the same behavior I describe with Bootstrap 3.2 in Bootstrap 3.3.x ? (It is very useful for mobile user for example).

More info : The modification of layout in media object was introduced in 3.3.0 and an issue was opened (and closed) about this modification and had repercussion for many users. The solution was to set the size of the media object (media, media-body) to 10000px.

解决方案

I have solved this issue by adding another container inside .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;
}

Used like this:

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

这篇关于Bootstrap 3.3.2中的Media-List和Text-Overflow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！