Question

我正在创建一个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>

Answer 1

编辑：刚刚发现：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来隐藏它。 - 它有时会打破一封信。

无论如何，只是一个想法！

Answer 2

只需使用text-overflow: ellipsis，但您需要修改您希望内容限制的宽度。类似的东西：

.myClass
{
    width: 200px;
    text-overflow: ellipsis;
}

Answer 3

这个CSS能满足您的需求吗？

text-overflow: ellipsis;

Answer 4

你被绑定到一个特定的高度但是对我有用。

.description .title {
height: 3.7em;
overflow: hidden;
}

将椭圆添加到溢出超过3行的内容

4 个答案: