Question

我正在使用文本溢出：省略号来在我的容器文章中创建最大行数。它工作正常，但限制在1行后开始，我需要设置更多。（比如3-4）问题是如何尝试它将我的文章容器中的所有东西移走或者没有做任何改变。

我是CSS的新手，所以我做错了，你可以帮我吗？

带省略号的CSS的一部分（完整的CSS / HTML可以在上面的演示中找到）：

#article-container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 168px;
}

#article-container p.more {
    overflow: hidden;
    padding: 0;
    white-space: normal;
    width: auto;
}

所有人都在这里可以帮助我设置限制更多行而不只是一个人？

感谢您阅读此帖

Answer 1

CSS中的Ellipse目前只有1行。有一些javascript库可以帮助您完成您想要的任务。例如http://dotdotdot.frebsite.nl/。

Answer 2

您不能使用CSS执行多行（至少不能与大多数浏览器兼容），但如果您不想使用Javascript，则可以使用PHP修剪它。

<?php
function Truncate($string, $length=50, $stopanywhere=false) {
    if (strlen($string) > $length) {
        //limit hit!
        $string = substr($string,0,($length -3));
        if ($stopanywhere) {
            //cut off anywhere
            $string .= '...';
        } else{
            //cut off after word
            $string = substr($string,0,strrpos($string,' ')).'...';
        }
    }
    return $string;
}
?>

使用您想要限制的文本定义$ string。

CSS - 文本溢出：省略号修复

2 个答案: