如果存在溢出,则更改单元格值

Question

我很确定这只是html/css是不可能的,但我想问以防万一.假设我在<div>里面<td>,div有overflow: hidden;风格.我希望:而不是仅仅被切断的溢出:

1. 检测是否有溢出.
2. 通过删除div内容的最后3个字母进行反应,并在末尾添加"...".

编辑:我最初在问这个问题时错过了一个关键细节 - 这可能与overflow-y有关,所以在生成"..."之前我仍然可以有多行文本吗？

PLNKR用于测试

Answer 1

从我在OP评论中提供的链接中获取的示例:

.element-to-cut-off {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

从您的plnkr,将div类更改为:

div{
    background-color:cyan;
    width: 80px;
    height: 40px; 
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

将plnkr更改为多行:

div{
  background-color:cyan;
  width: 80px;
  height: 40px; 
  overflow: hidden; 
  -webkit-line-clamp: 2; // number of lines before ellipsis kicks in
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

我将强调我不知道哪些浏览器可以使用此css3并且没有时间测试所有浏览器,但在Chrome 46中工作正常