如何使用单元格百分比对表行中的省略号溢出进行文本处理

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>

我需要将文本右侧包围左侧，右侧列以灰色包裹。 我已尝试过所有内容并在互联网上搜索，似乎没有任何效果。

我将min-width放在左侧的table-cell中，但是在灰色的一侧需要空间。

Answer 1

在拉伸类中添加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>