アンカータグのテキストを表のセルにクリップする方法はありますか？

Question

私はテーブルセルを持っており、それを正確に2行にしたいと思います。テキストのオーバーフローが発生します。私はここで

<table> 

    <tr> 
    <td> 
     <a href="javascript:void(0);"> 
     hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world</a> 
    </td> 
    </tr> 
</table> 

CSS

td { 
    height:2em; 
    text-overflow:clip; 
    background-color:cyan; 
} 

はフィドルがhttps://jsfiddle.net/u1cp1r0v/

である。しかし、それは私が望んで行いません。このコードをしようとしています。

何が間違っているのか分かりますか？

おかげ

Answer 1

だけの純粋なCSSのみで比較的クロスブラウザ複数行の省略記号ソリューションがthis oneですが、それには限界/欠点を有しています。詳細はthis articleをご覧ください。

---

テキストが必要な行の最大数を超えた場合、あなたはあなたが必要とするすべては、右下の隅に省略記号記号についてはあまり気にしない場合：もちろん

height: lines * line-height; 
overflow: hidden; 

、 lines * line-heightを有効な高さの値に置き換える必要があります。

それは<td> sが、そのすべての兄弟が背が高いということになります<tr>の中に、特別な書式のルールと1背の高いセルを持っているように、<td>要素ではなく、各セルの内容のラッパーに、このCSSを適用する方が良いでしょうセットheight 。

line-heightは単位のない値が渡されたときの単位としてemを前提としています（ただし、正しく、他の長さのタイプのCSS単位を解析）し、ほとんどのブラウザはインライン（通常の）テキストの1.3にそれをデフォルトに注意してください。

しかし、ブートストラップは、例えば、10pxにremを設定するための決定と同様に、開発者のための人生を容易にするために、彼らの努力の一環として、（通常のテキストのために24pxが得られる）、1.5em時にデフォルトでそれを設定します。

また、まともなJavaScriptソリューションもありますが、質問をする前に行った徹底的な（再）検索の最中に既に完了していると思います。