如何将文本省略号溢出表行与细胞百分比

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

我需要包装在右侧尊重左侧和灰色右列中的文本。我已经尝试了一切，并在互联网上搜索，似乎没有任何工作。

我把最小宽度放在左侧的表格单元格中，但是这样会占用灰色侧的空间。

来源

2017-02-17 juliangonzalez

_this属性仅影响溢出块容器element_内容。将'span'改为'div'或将'display：block'加入'.stretch'。请参阅[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow） – vanburen

附加显示：在拉伸类内联块并设置愿望宽度

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

来源

2017-02-17 02:24:14

@juliangonzalez内联元素无法调整大小，您需要重置显示属性，因此它可以是大小和溢出来得到可用;） –

你可以在span中添加float，并将witdh的值更改为 –

百分比，这完全是关于https://developer.mozilla.org/en-US/docs/Web/Guide/ CSS/Block_formatting_context –

如何将文本省略号溢出表行与细胞百分比

回答

相关问题