css - 途中で切れたテキスト行を完全に非表示にすることはできますか?

Question

高さが設定され、オーバーフローが隠されているコンテナにテキストの本文を配置すると、収まる可能性のある最後の行が途切れてしまうことがよくあります。jsFiddleまたは画像の例:

これが発生するのではなく、その行が完全に表示されないようにする方法はありますか?

シナリオは、ブログ投稿テキストを含む動的な高さ (親の高さの 100%、本体の高さの 80%) の列があり、ある場合は下部に「すべてを読む」を表示したいというものです。テキストのオーバーフロー (判別が容易)。現時点では、半分レンダリングされたテキストがその上にあるだけでひどいものに見えます。

ページの下部にあるナビゲーションの前に列を終了する必要があるため、オーバーフローを削除できません。

Answer 1

プロパティからインスピレーションを得ることができますがtext-overflow、複数行の場合は JavaScript で行う必要があります: http://pvdspek.github.com/jquery.autoellipsis/ ( CSS を使用する場合、複数行のオーバーフロー ブロックには「...」を使用します)行）

Answer 2

これが私のコードです

 <li style="color: Black; font-weight: bold; oveflow:hidden; line-height: 1.2em;height: 2.6em; ">Page Size
                    <select id="ddlOrderstoDisplay" style="width: 50px;">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="75">75</option>
                        <option value="100">100</option>
                        <option value="150">150</option>
                    </select>               
                </li>

これらの行をタグ内に配置すると、すべてのブラウザーで機能します。

**overflow: hidden;
line-height: 1.2em;
height: 3.6em;**  

Answer 3

削除するoverflow:hidden

div
{
    width: 100px;
    height: 92px;
    background: black;
    color: white;
}​

Answer 4

「列幅」属性を追加するだけで機能します。あなたの例では、 column-width:100px になります

Answer 5

を増減できます。line-height

あなたの快適さに従って