javascript - 向超出 3 行的内容添加省略号

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 来隐藏它。- 它有时会破坏一封信。

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