0

我正在创建一个 tumblr 主题，当您将鼠标悬停在照片帖子上时，它会显示描述（示例描述如下所示）。

设计者只希望描述的前三行显示并在描述之后放置省略号，如果它溢出了 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 插件）

据我所知，没有办法让它换成三行然后省略号。

如果您只想在 1 行之后使用省略号，请使用：

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

但是，您可以做一些棘手的 css 来模拟它，尽管它不会 100% 完美。我附上了一个带有仿真的 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 回答