过渡不起作用(空格：无换行 ->空格：正常)

Question

据我所知，在我的情况下，转换不起作用。当然，我可以添加最大高度和 z 索引(并对其进行动画处理(，但我需要平滑过渡的省略号。

My code here: https://jsfiddle.net/57oknf1f/

Answer 1

你可以用javascript来实现这一点。我为你写了一个简单的演示，它使用.text通过jQuery制作"省略号"效果。

我的代码中一定有一些错误，你应该自己修复它们。我只是指出一种方法。

$(".tdsp+td div div").each(function() {
  var $dom = $(this);
  $dom.css({
    'white-space': "normal"
  });
  var text = $dom.text();
  var lineEndIndex;
  $dom.text("a");
  setTimeout(function() {
    var lineHeight = $dom.height();
    var textIndex = 1;
    function addText() {
      $dom.text(text.slice(0, textIndex));
      if ($dom.height() > lineHeight) {
        $dom.text(text.slice(0, textIndex - 4) + "...");
        lineEndIndex = textIndex;
        return;
      }
      textIndex++;
      setTimeout(addText);
    }
    addText();
  });
  $dom.on("mouseenter", function() {
    var textIndex = lineEndIndex;
    function addText() {
      $dom.text(text.slice(0, textIndex));
      if (textIndex === text.length) {
        return;
      }
      textIndex++;
      setTimeout(addText);
    }
    addText();
  });
  $dom.on("mouseleave", function() {
    var textIndex = text.length;
    function addText() {
      $dom.text(text.slice(0, textIndex));
      if (textIndex === lineEndIndex - 4) {
        $dom.text(text.slice(0, textIndex) + "...");
        return;
      }
      textIndex--;
      setTimeout(addText);
    }
    addText();
  });
});

table {
  border: 1px solid #f7f7f7;
  margin-bottom: 5px;
  margin-top: 5px;
  width: 100%;
  table-layout: fixed;
}
td {
  border: 1px solid #f7f7f7;
  background: #FFF;
  height: 55px;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdsp {
  overflow: hidden;
}
table td>div {
  position: relative;
}
table td>div div {
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-top: -11px;
}
table td>div div:hover {
  white-space: normal;
  z-index: 1;
}
th {
  border-radius: 0;
  background: #000;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="bordered centered">
  <thead>
    <tr>
      <th>Test</th>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="tdsp">Test</td>
      <td>
        <div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
      </td>
    </tr>
    <tbody>
</table>