CSS:Bootstrap 媒体:环绕 + 省略号

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>