过渡不起作用（白色空间：nowrap - ＆gt;白色空间：正常）

Question

据我所知，过渡不适合我的情况。当然，我可以添加max-height和z-index（并为其设置动画），但是我需要省略和平滑过渡。

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

Answer 1

您可以使用javascript实现此目的。我为你写了一个简单的演示，它使用.text来制作一个＆＃34;省略号＃34;使用jQuery的效果。

我的代码中肯定存在一些错误，您应该自己修复它们。我只想指出一种方式。

＆＃13;

＆＃13;

$(".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();
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;