Media-List and Text-Overflow in Bootstrap 3.3.2

Question

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.

Answer 1

It looks like the display: table-cell; in the rule below is that is causing the issue. Overridding it should resolve the issue.

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

Adding the snippet below seems to restore the functionality of 3.2, but who knows that other issues this may create with the 3.3.1 code...

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

Also, this doesn't work with the newest version (currently 3.3.2) because the width of .media-body is set at 10000px for some reason... Changing this to width: auto plus the change above seems to make it work on 3.3.2. But again, I have no idea what other issues this may create.

.media-body {
  width: 10000px;
}

Answer 2

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>