移行が機能しない（空白：空白→空白：正常）

Question

私の知る限り、移行は私の場合は機能しません。もちろん、max-heightとz-indexを追加してアニメーション化することはできますが、滑らかな遷移を持つ省略記号が必要です。

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>