CSS：引导媒体：包装+省略号

Question

我正在使用Bootstrap 4.0.0-alpha.6设计类似信使的布局。

现在我遇到了media object的问题。它应该是破解词并显示省略号，但这不是发生的事情。

只需.most-recent-message即可显示省略号。

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

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

Ps：我找到了similar issue，但是给定的解决方法对我不起作用。

Answer 1

您需要将溢出规则移至父.media-body div，.most-recent-message div需要显示为inline。你也有一些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 2

我认为你需要定义父容器的宽度。 https://jsfiddle.net/7x93ofzm/2/

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

Answer 3

只需要：

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

Fiddle

Answer 4

您可以将overflow属性添加到父级，在本例中为.media-body

fiddle

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;