css - 如何使用单元格百分比在表格行中文本省略号溢出

Question

.container{
  background-color: gray;
}

.listing-row{
  display: table;
  width: 100%;
  margin 0;
}

.listing-row-inner{
  display: table-row;
  background-color: yellow;
  
}

.tc{
  display: table-cell;
  border: 1px solid black;
}

.listing-row-image{
  width: 30%;
}

.listing-row-content{
  width: 70%;
}

.stretch {
    width : 40px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abs{
  position: absolute;
  right: 20px;
  top:0px;
  background-color: #0BB7A5;
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row container">
  <div class="col-sm-8"> 
    <div class="listing-row">
      <div class="listing-row-inner">
        <div class="tc listing-row-image" >left</div>
        <div class="tc listing-row-content">
          <span class="stretch"> 
           BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
          </span>   
          <span class="abs">AA</span>
         </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4"></div>
</div>

我需要将右侧的文本相对于左侧和右侧的列换行为灰色。 我已经尝试了所有方法并在 Internet 上进行了搜索，似乎没有任何效果。

我将最小宽度放在左侧的表格单元格中，但它会占用灰色一侧的空间。

Answer 1

在 stretch 类中添加 display:inline-block 并设置你想要的宽度

.container{
  background-color: gray;
}

.listing-row{
  display: table;
  width: 100%;
  margin 0;
}

.listing-row-inner{
  display: table-row;
  background-color: yellow;
  
}

.tc{
  display: table-cell;
  border: 1px solid black;
}

.listing-row-image{
  width: 30%;
}

.listing-row-content{
  width: 70%;
}

.stretch {
    width : 40px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.abs{
  position: absolute;
  right: 20px;
  top:0px;
  background-color: #0BB7A5;
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row container">
  <div class="col-sm-8"> 
    <div class="listing-row">
      <div class="listing-row-inner">
        <div class="tc listing-row-image" >left</div>
        <div class="tc listing-row-content">
          <span class="stretch"> 
           BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
          </span>   
          <span class="abs">AA</span>
         </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4"></div>
</div>