CSS: Bootstrap media: wrapping + ellipsis - css

Question

I am designing a messenger-like layout with Bootstrap 4.0.0-alpha.6.
Right now I am having trouble with media object. It should break-word and show ellipsis, but that's not what happens.
Just .most-recent-message should show ellipsis.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Live: https://jsfiddle.net/f55huf3j/
Ps: I found a similar issue, but the given workaround didn't work for me.

Answer 1

You can add the overflow property to the parent, in this case .media-body
fiddle
body {
background: #f4f4f4;
padding: 1rem;
}
.conversation {
display: block;
padding: 0.75rem 1rem;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 4px;
}
.media-body {
overflow: hidden;
}
h6 {
margin-bottom: 0.15em;
}
.most-recent-message {
color: rgba(#000, 0.5);
font-size: 0.85em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<!-- Sidebar - begin -->
<div class="col-12 col-md-3">
<div class="card">
<!-- Recent conversation - begin -->
<a href="#" class="conversation">
<div class="media">
<img class="d-flex align-self-center mr-1 avatar" src="http://i.imgur.com/CEtZcrC.jpg">
<div class="media-body">
<h6>
Sarah Martins Smit dfd df df dfh
</h6>
<div class="most-recent-message">
We can track errors for this kind of bug
</div>
</div>
</div>
</a>
<!-- Recent conversation - end -->
</div>
</div>
<!-- Sidebar - end -->
<!-- Chat - begin -->
<div class="col-12 col-md-9">
<div class="card">
Content
</div>
</div>
<!-- Chat - end -->
</div>

Answer 2

You need to move the overflow rules to the parent div which is .media-body and the .most-recent-message div needs to be displayed as inline. Also you have some CSS errors like an extra close bracket. Here's what your css should be:
body {
background: #f4f4f4;
padding: 1rem;
}
.media-body{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.conversation {
display: block;
padding: 0.75rem 1rem;
&:hover {
background: rgba(#000,0.05);
text-decoration: none;
}
}
.avatar {
width: 50px;
height: 50px;
border-radius: 4px;
}
.media {
}
h6 {
margin-bottom: 0.15em;
}
.most-recent-message {
color: rgba(#000,0.5);
font-size: 0.85em;
display:inline;
}

Answer 3

I think you need to define the width of the parent container.
https://jsfiddle.net/7x93ofzm/2/
.media-body {
width: calc(100% - 54px);
}

Answer 4

Should only need:
.media-body {
display: inline-grid;
}
Fiddle