0

私はtumblrテーマを作成しています。写真の投稿にカーソルを合わせると、説明が表示されます（以下に説明の例を示します）。

設計者は、説明の最初の3行だけが表示され、3行を超えた場合に、説明の後に省略記号を配置することを望んでいます。

文字数が十分ではないことを考慮して、これを行うための最良の方法は何ですか？

助けてくれてありがとう...

http://brendan-rice.tumblr.com/

写真投稿の例

<div class="description photo" style="background-color: rgb(82, 69, 99);">
    <div style="">
        <input type="hidden" value="22186233340" class="id">
        <span class="title" style="">
        <p style="">
            <a href="http://staff.tumblr.com/post/21806558913/attention-west-coast-check-out-our-official" class="tumblr_blog" style="">staff</a>:
        </p>
        <blockquote style="">
            <p style="">
                <strong style="">Attention West Coast:</strong> Check out our <a href="http://www.tumblr.com/meetup/10107" style="">official Tumblr meetup</a> in Los Angeles on Tuesday 5/1! RSVP <a href="http://www.tumblr.com/meetup/10107" style="">here</a>.
            </p>
        </blockquote>
        <p style="">
            (Source: <a title="meetups" href="http://meetups.tumblr.com/post/21804989817/were-gonna-be-in-la-tuesday-night-come-grab-a" style="">meetups</a>)
        </p>
        </span>
        <div class="actions" style="">
            <span style="float: left;">
            <a target="_blank" href="http://www.tumblr.com/follow/penguinenglishlibrary " class="follow" style="">
            Follow </a>
            </span>
            <span style="float: right;">
            <a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="reblog" style="">
            Reblog </a>
            </span>
            <span style="float: right;">
            <a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="like" style="">
            Like </a>
            </span>
        </div>
    </div>
</div>
4

4 に答える 4

2

編集：ちょうどこれを見つけました：あなたの問題を解決するはずのhttp://dotdotdot.frebsite.nl/（jqueryプラグイン）

私の知る限り、3行に折り返し、次に省略記号に折り返す方法はありません。

1行の後に省略記号が必要な場合は、次を使用します。

.class{
  width:200px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

ただし、100％完全ではありませんが、トリッキーなcssを実行してエミュレートすることができます。エミュレーションにjsfiddleを添付しました：http：//jsfiddle.net/ET3F8/

基本的に、3行に折り返され、その後非表示になります。コンテナの右下に省略記号テキスト（ "..."）を含む要素があります。テキストをカバーし、省略記号をエミュレートします。

問題：-常に表示されます。テキストがオーバーフローしていない場合は、JSを使用して非表示にすることができます。-それは時々手紙を壊します。

とにかく、ただのアイデア！

于 2012-05-03T23:55:47.223 に答える
1

を使用するtext-overflow: ellipsisだけですが、コンテンツを制限したいものの幅を修正する必要があります。何かのようなもの：

.myClass
{
    width: 200px;
    text-overflow: ellipsis;
}
于 2012-05-01T12:06:34.367 に答える
1

このCSSはあなたのニーズを満たしていますか？

text-overflow: ellipsis;
于 2012-05-01T12:06:34.733 に答える
0

あなたは特定の高さに縛られていますが、私のためにトリックをします。

.description .title {
height: 3.7em;
overflow: hidden;
}
于 2012-05-03T23:10:41.473 に答える