CSS：引導媒體：包裝+省略號

Question

我正在用Bootstrap 4.0.0-alpha.6設計一個類似Messenger的佈局。

現在我遇到了media object問題。它應該打破單詞並顯示省略號，但這不會發生。

只是.most-recent-message應顯示省略號。

overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 

直播：https://jsfiddle.net/f55huf3j/

PS：我發現了一個similar issue，但所提供的解決方法並沒有爲我工作。

Answer 1

您可以將overflow屬性添加到父，在這種情況下.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

你需要溢出規則移動到這是.media-body和.most-recent-message DIV需要顯示爲inline父DIV。你也有一些CSS錯誤，像一個額外的關閉括號。這是你的CSS應該是什麼：

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

我想你需要定義父容器的寬度。 https://jsfiddle.net/7x93ofzm/2/

.media-body { 
    width: calc(100% - 54px); 
} 

Answer 4

應該只需要：

.media-body { 
    display: inline-grid; 
} 

Fiddle