过渡无效（空白：nowrap->空白：正常）

Question

As I know, transition not working in my case. Of course, I can add max-height and z-index (and animate it), but I need ellipsis with smooth transition.

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

Answer 1

You can achieve this with javascript. I write a simple demo for you, which use .text to make a "ellipsis" effect using jQuery.

There must be some bugs in my code, you should fix them yourself. I just point out a way.

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