Question

我搜索了堆栈溢出并查看了一些解决方案但到目前为止没有任何工作。我所拥有的是一个具有灵活列宽的表，其中一个表格单元格中有一些带有一些文本的div，我想要有溢出的椭圆。

这里的JS小提琴示例：

<table>
  <td class= 'name'>Name</td>
  <td class='desc'>
    <div>
      <div class='desc-1'>descript1:</div>
      <div class='desc-2'>really long description that I want to have ellipses for ajhdfjhdf ajhdf akjdhf asdjfh askdjfh askdjfh asdkjfh askjdfh askdjfh askjdfhaksjdhf askjfdh ajkdsfh
      </div>  
    </div>
  </td>
</table>

.name {
  width: 50%;

}
.desc {
  width: 50%;
  max-width: 100%;
}
td {
  border: 1px solid black;
}
td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

http://jsfiddle.net/tgowurLu/

如果我将.desc类的宽度设置为固定值，它可以正常工作，如下所示：

.desc {
      width: 50%;
      max-width: 300px;
    }

http://jsfiddle.net/Lx71r05b/

如何使其适用于灵活的网格列宽（百分比值）？

编辑：此处的解决方案有助于解决我的问题：

CSS: Truncate table cells, but fit as much as possible

Answer 1

请使用此代码

＆＃13;

/*Please use this code in CSS*/
.responsive {width:100%;overflow:hidden;}
.table-data {width:100%;max-width:100%}

/*you can give fix width as below*/
.desc {
  width: 50%;
  max-width: 300px;
}

＆＃13;

<!--please use this code in html:-->
<div class="responsive"><table class="table-data">
  <td class= 'name'>Name</td>
  <td class='desc'>
    <div>
      <div class='desc-1'>descript1:</div>
      <div class='desc-2'>really long description that I want to have ellipses for ajhdfjhdf ajhdf akjdhf asdjfh askdjfh askdjfh asdkjfh askjdfh askdjfh askjdfhaksjdhf askjfdh ajkdsfh
      </div>  
    </div>
  </td>
</table></div>

＆＃13;

文本溢出省略号不适用于具有灵活宽度的表格单元格中的div

1 个答案: