表格单元格内宽度自适应的div元素，文字溢出省略号样式无法生效

Question

我在stackoverflow上进行了搜索并查看了一些解决方案，但目前为止没有任何一个可用的。我的问题是，我有一个具有灵活列宽度的表格，并且其中一个表格单元格具有包含一些文本的div，我希望对这些文本使用省略号以防止溢出。

JS fiddle示例在此处:

<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：截断表格单元格，但尽可能适合

- ski

---

以下是 text-overflow: ellipsis 的要求：https://dev59.com/1FwY5IYBdhLWcg3wEEN2#33061059 - Michael Benjamin

这最终对我有用：https://dev59.com/yG435IYBdhLWcg3wvyw5 - ski

Answer 1

请使用以下代码。

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

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

- Prajwal Shrestha

---

谢谢！这似乎有效，但我仍然遇到一些问题并正在调查原因... - ski

@ski，你现在遇到了哪些问题？请说明。 - Prajwal Shrestha

这个（在这里得到最高票的解决方案）最终对我起作用了：https://dev59.com/yG435IYBdhLWcg3wvyw5 - ski