javascript - javascript でオーバーフローが隠されている div に表示されるテキストに ... を配置します

Question

この CSS クラスを含む div があります。

.textodiv{ height:29px;overflow:hidden;}

表示されるテキストのサイズは非常に可変です。上記の CSS では、約 2 行表示され、残りは非表示になります。それで、あなたは私が望んでいたようにそれを手に入れました。問題は、表示されているテキストの最後に 3 つのドットを配置して、連続性を示すことです。しかし、テキストはどのくらい表示されますか? 文字数を制限しようとしましたが、固定サイズのフォントと、単語のサイズに応じて改行が変わるため、この解決策は効果的ではありません。

助言がありますか？

Answer 1

CSS を介してこれを行うことができる単一行のアプローチでは、css ルールに以下を追加します。

text-overflow: ellipsis;
white-space: nowrap;

複数行が必要な場合は、次の URL にある JavaScript アプローチを使用する必要があります:
Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?