1

私は、それらが入れられるコンテナdivに対して長すぎる場合に省略記号に消える、小さな宣伝文句を提供したいと思います。ユーザーが記事へのリンクをたどると、より多くのテキストがあることを視覚的に示したいと思います。楕円形の画像は使いたくありませんが、必要に応じてjQueryを使用できます。私の好みは、可能であれば、CSS3で完全に行うことです。

text-overflow：ellipsisプロパティ/ valueをoverflow：hiddenおよびwhite-space：nowrapと組み合わせると、これの1行バージョンが可能になりますが、複数行についてはどうでしょうか。対私の場合。

これら、または別のプロパティ/値のペアにより、これを厳密にCSSで実行できますか？

どんな助けでも大歓迎です。

4

3 に答える 3

3

私のものではなく、このフィドルを試してください

またはdotdotdotプラグインがあります

于 2012-05-16T22:22:58.583 に答える
0

次の行に沿ってHTMLマークアップを指定します。

<div class="multiline"><!-- long string of text... --></div>

<div class="singleline"><!-- long string of text... --></div>​

そして次のCSS：

div {
    /* aesthetic stuff, such as width, max-width, border, line-height etc... */
    overflow: hidden; /* required to hide the overflow */
    position: relative;  /* required to position the pseudo-element */
}
div.multiline {
    max-height: 12em; /* defines the 'overflow point' */
}
div.singleline {
    max-height: 1.5em;
}
div::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2em;
    text-align: center;
    background-color: #fff;
}

JSフィドルデモ。

これはあなたの意図を大まかに達成しますが、準拠したブラウザでは、残念ながら、生成された「省略記号」を表示されているテキストの末尾に揃えないという問題があります。

于 2012-05-16T22:23:48.743 に答える
0

cssを削除します

 white-space:nowrap;

divに高さを設定します

于 2012-05-16T22:25:22.637 に答える