工作跨浏览器解决方案

这个问题多年来一直困扰着我们大家。

为了在所有情况下都有所帮助，我列出了仅CSS的方法，以及一个jQuery方法，以防CSS警告出现问题。

这里是我提出的一个仅限CSS的解决方案，它在所有情况下都有效，但有一些小的注意事项。

基本原理很简单，它隐藏跨度的溢出，并根据Eugene Xa建议的线高度设置最大高度。

然后在包含div之后有一个伪类，它很好地放置了省略号。

注意事项

此解决方案将始终放置省略号，无论是否需要省略号。

如果最后一行以结尾句结尾，你将以四个点结尾。。。。

您需要对文本对齐方式感到满意。

省略号将位于文本的右侧，看起来很草率。

代码+代码段

小提琴演奏家

.text（文本）{位置：相对；字体大小：14px；颜色：黑色；宽度：250px；/*可以是你喜欢的任何东西*/}.text凹面{位置：相对；显示：内联块；换行：换行；溢出：隐藏；最大高度：3.6em；/*（要显示的行数）*（行高）*/线高：1.2em；文本对齐：对齐；}.text.省略号：：之后{content:“…”；位置：绝对；右：-12px；底部：4px；}/*psudo类的右侧和底部是基于各种因素、字体大小等的像素。根据自己的需要调整*/<div class=“text省略号”><span class=“text concat”>Lorem ipsum dolor坐amet，笔尖eleifend cu his，porro fugit mandamus no mea。坐着讲故事，每个人都有一段对话，每个人也有一段相扑。在nominavi percula harsti ius，在sonet tincidunt，cu pose facilisis eos。每一次选择权争议，都没有任何人的意见。Eu已经得出结论，最初的决定是在。Virtute feugait eivim公司。社区诚实互助协会（Commune honestatis accommodare pri ex.Ut est civilbus accumsam），原则上的概念，以及两个案例。在双人间聚会。我已经为你的职业生涯做好了准备。重要的是，现场设施，包括现场脚本。</span></div>

jQuery方法

在我看来，这是最好的解决方案，但不是每个人都可以使用JS。基本上，jQuery将检查任何.text元素，如果有比预设的max-var更多的字符，它将删除其余字符并添加省略号。

对于这种方法没有任何警告，但是这个代码示例仅用于演示基本思想-我不会在生产中使用它，除非对其进行改进，原因有两个：

1） 它将重写.text元素的内部html。无论是否需要。2） 它不需要检查内部html是否没有嵌套的元素，因此您非常依赖作者来正确使用.text。

已编辑

感谢您的捕获@markzzz

代码段（&S）

小提琴演奏家

setTimeout（函数）{var最大值=200；变量tot，str；$（'.text'）.each（函数）{str=字符串（$（this）.html（））；tot=字符串长度；str=（总计<=最大值）? 字符串：str.substring（0，（最大值+1））+“…”；$（this）.html（str）；});},500); // 延迟仅作为示例。.text（文本）{位置：相对；字体大小：14px；颜色：黑色；字体系列：无衬线；宽度：250px；/*可以是你喜欢的任何东西*/}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><p class=“text”>老年人往往会忘记年轻时的想法；他们忘记了思维跳跃的敏捷，年轻人直觉的大胆，新鲜洞察力的敏捷。他们习惯于各种各样的理性，因为这不仅仅是经验的积累，老年人认为自己比年轻人更聪明。</p><p class=“text”>老年人往往会忘记年轻时的想法；</p><!-- 工作跨浏览器解决方案这是一种jQuery方法，用于将文本正文限制为n个单词，并以省略号-->结尾

我一直在寻找这个，但后来我意识到，该死的我的网站使用php！！！为什么不在文本输入上使用修剪功能并播放最大长度。。。。

对于那些使用php的人，这里也有一个可能的解决方案：http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>

我有一个很好的解决方案，但省略号使用了渐变。当你有动态文本时，它会起作用，所以你不知道它是否足够长，需要一个椭圆。优点是您不必进行任何JavaScript计算，它适用于包括表格单元格在内的可变宽度容器，并且是跨浏览器的。它使用了一些额外的div，但它很容易实现。

标记：

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

博客文章：http://salzerdesign.com/blog/?p=453

示例页面：http://salzerdesign.com/test/fade.html

您可以执行以下操作：

.max行{显示：块；/*或内联块*/文本溢出：省略号；换行：换行；溢出：隐藏；最大高度：3.6em；线高：1.8em；}<p class=“max lines”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Nunc vitae leo dapibus，accumsan lorem eleifend，pharetra quam。Quisque前庭commodo justo，eleifend mollis enim blandit eu。Aenean hendrerit nisl et elit maximus finibus公司。Suspendis scelerisque consectetur nisl mollis sceleriske</p＞

其中，最大高度：=线高度：×<线数>（单位：em）。

我真的很喜欢线夹，但还不支持firefox。。所以我做了一个数学计算，然后隐藏溢出

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

现在让我们假设你想通过jQuery删除并添加这个类，你需要有一个额外的像素，所以它的最大高度是63像素，这是因为你需要每次检查高度是否大于62像素，但是在4行的情况下，你会得到一个假真，所以额外的像素可以解决这个问题，不会产生任何额外的问题

我将为此粘贴一个coffee脚本，作为一个示例，它使用了默认隐藏的两个链接，类读得更多，读得更少，它将删除溢出不需要的链接，并删除主体溢出类

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

有一种方法可以使用非官方的换行符语法，从Firefox 68开始，它可以在所有主流浏览器中使用。

正文{边距：20px；}.text（文本）{溢出：隐藏；文本溢出：省略号；显示：-webkit框；-webkit线夹：2；/*要显示的行数*/线夹：2个；-webkit框方向：垂直；}<div class=“text”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。维内纳提斯·布拉迪（Aliquam consectetur venenatis blandit）。Praesent vehicula，libero non pretium vulputate，lacus arcu facilisis lectus，sed feugiat tellus nulla eu dolor。Nulla porta bibendum lectus quis euismod。Aliquam volutpat ultricies porttitor。克雷斯·里苏斯·尼西，accumsan vel cursus ut，sollicitudin vitae dolor。《圣经》中的Fusce scelerisque eleifend lectus。lacinia egestas suspendissa felis a volutpat。</div>

除非您关心IE用户，否则无需进行线高度和最大高度回退。