跨浏览器多行文本溢出,省略了宽度和高度附加的省略号`<div>`

Question

我为这个问题制作了一个图像,以便更容易理解.

是否可以在<div>具有固定宽度和多行的a 上创建省略号？

我已经在这里和那里尝试了一些jQuery插件,但找不到我正在寻找的那个.有什么建议？想法？

Answer 1

只是一个快速的基本想法.

我正在使用以下标记进行测试:

<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>  
</div>

和CSS:

#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }

应用此jQuery将实现所需的结果:

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

它反复尝试删除文本的最后一个单词,直到达到所需的大小.因为溢出:隐藏; 这个过程仍然是看不见的,即使关闭了JS,结果仍然是"视觉上正确的"(当然没有"......").

如果你将它与服务器端的合理截断相结合(只留下很小的开销),那么它将运行得更快:).

同样,这不是一个完整的解决方案,只是一个想法.

更新:添加了一个jsFiddle演示.

Answer 2

试试jQuery.dotdotdot插件.

$(".ellipsis").dotdotdot();

Answer 3

用于"线夹"的Javascript库

注意,"线夹"也称为"多线块上的省略号"或"垂直省略号".

github.com/BeSite/jQuery.dotdotdot

• 优点:2.5Kb(缩小和压缩),回购时没有大的活动,但也不错
• 缺点:jQuery依赖,支付商业用途(CC-BY-NC-4.0许可证)
• 我的2美分:stackoverflow.com/questions/25187774/read-more-and-read-less-with-dotdotdot-jquery/29118739#29118739
• 有用的stackoverflow.com/questions/19015945/jquery-dotdotdot-expand-truncate-text-onclick
• 有用的gist.github.com/chiragparekh/c7e33dc749ed25544bde

github.com/josephschmitt/Clamp.js

• 缺点:代码回购几乎没有活跃
• 信息reusablebits.com/post/2980974411/clamp-js-v0-2-explanations-and-performance

以下是我尚未调查的一些内容:

• github.com/ftlabs/ftellipsis
• github.com/micjamking/Succinct
• github.com/pvdspek/jquery.autoellipsis和pvdspek.github.io/jquery.autoellipsis
• github.com/rviscomi/trunk8
• github.com/dobiatowski/jQuery.FastEllipsis
• github.com/theproductguy/ThreeDots
• github.com/tbasse/jquery-truncate
• github.com/kbwood/more

用于线夹的CSS解决方案

有一些CSS解决方案,但最简单的用途-webkit-line-clamp是浏览器支持不佳.在jsfiddle.net/AdrienBe/jthu55v7/上观看现场演示

许多人为了使用CSS只能实现这一点而付出了巨大的努力.查看有关它的文章和问题:

• css-tricks.com/line-clampin:在阵营坎普林的5星文章
• mobify.com/blog/multiline-ellipsis-in-pure-css:仅限CSS
• cssmojo.com/line-clamp_for_non_webkit-based_browsers/:非模仿webkit浏览器中的"mimic"-webkit-line-clamp
• 使用CSS,使用"..."表示溢出的多行块
• 跨浏览器多行文本溢出,省略了宽度和高度附加的省略号`<div>`
• 如何仅显示div的前几行(clamp)？
• jquery限制段落中的行并将三个句点应用到结尾
• 使用CSS将文本长度限制为n行

我推荐的是什么

把事情简单化.除非您有足够的时间专注于此功能,否则请选择最简单且经过测试的解决方案:简单的CSS或经过良好测试的JavaScript库.

寻找花哨/复杂/高度定制的东西,你将为此付出代价.

别人怎么做

像Airbnb一样淡出可能是一个很好的解决方案.它可能是基本的CSS加上基本的jQuery.实际上,它似乎与CSSTricks上的这个解决方案非常相似

哦,如果你寻找设计灵感:

• smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/,从2009年开始......
• Dribbble可能有一些有趣的设计......我找不到收集它们的方法(通过搜索或标签),随意分享相关链接

Answer 4

You can use -webkit-line-clamp property with div.

-webkit-line-clamp: <integer> which means set the maximum number of lines before truncating the content and then displays an ellipsis (…) at the end of the last line.

div {
  width: 205px;
  height: 40px;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  
  /* <integer> values */
  -webkit-line-clamp: 2;
}

<div>This is a multi-lines text block, some lines inside the div, while some outside</div>

Answer 5

HTML中没有这样的功能,这非常令人沮丧.

我已经开发了一个库来处理这个问题.

• 多行文本溢出:省略号
• 使用不支持它的技术的多行文本:例如,SVG,Canvas
• 例如,在SVG文本,HTML呈现和PDF导出中具有完全相同的换行符

查看我的网站以获取屏幕截图,教程和下载链接.

Answer 6

在Adrien Be 的回答中找到了这个仅使用CSS 的简短解决方案：

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

截至2020 年 3 月， 浏览器支持率为95.3%，IE 和 Opera Mini 不支持。适用于 Chrome、Safari、Firefox 和 Edge。

Answer 7

不确定这是否是您正在寻找的，它使用 min-height 而不是高度。

    <div id="content" style="min-height:10px;width:190px;background:lightblue;">
    <?php 
        function truncate($text,$numb) {
            // source: www.kigoobe.com, please keep this if you are using the function
            $text = html_entity_decode($text, ENT_QUOTES);
            if (strlen($text) > $numb) {
                $text = substr($text, 0, $numb);
                $etc = "..."; 
                $text = $text.$etc;
            } 
            $text = htmlentities($text, ENT_QUOTES);
            return $text;
        }
        echo truncate("this is a multi-lines text block, some lines inside the div, while some outside", 63);
    ?>
    </div>