是否可以使用CSS将文本长度限制为“n”行(或在垂直溢出时剪切)。

文本溢出:省略号;仅适用于1行文本。

原文:

Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus、vel ut aliquet、elementum nunc乌尔纳修女院!坐下!图比斯岛莫斯·廷西杜特!Dapibus sed aenean、magna sagitis、lorem velit

所需输出(2行):

Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus,velut aliquet,elementum。。。


当前回答

我一直在寻找这个,但后来我意识到,该死的我的网站使用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;
?>

其他回答

工作跨浏览器解决方案

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

为了在所有情况下都有所帮助,我列出了仅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个单词,并以省略号-->结尾

据我所知,这只可能使用高度:(一些em值);溢出:隐藏,即使这样它也不会有幻想。。。最后。

如果这不是一个选项,我认为没有一些服务器端预处理(很难,因为文本流不可能可靠地预测)或jQuery(可能但可能很复杂)是不可能的。

.word-limit{
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: break-word;
   overflow: hidden;
}

如果你想专注于每一封信,你可以这样做,我提到这个问题

函数truncate(源,大小){返回源.length>size?source.sslice(0,大小-1)+“…”:源;}var text=truncate('truncate text to fit in 3 lines',14);console.log(文本);

如果你想专注于每个单词,你可以这样做+空格

consttruncate=(title,limit=14)=>{//14是默认参数常量newTitle=[];if(title.length>limit){title.split(“”).reduce((acc,cur)=>{如果(acc+cur.length<=极限){newTitle.push(cur);}返回acc+cur.length;}, 0);return newTitle.join(“”)+“…”}返回标题;}var text=truncate('truncate text to fit in 3 lines',14);console.log(文本);

如果你想专注于每个单词,你可以这样做+没有空格

consttruncate=(title,limit=14)=>{//14是默认参数常量newTitle=[];if(title.length>limit){Array.prototype.slice.call(title).reduce((acc,cur)=>{如果(acc+cur.length<=极限){newTitle.push(cur);}返回acc+cur.length;}, 0);return newTitle.join(“”)+“…”}返回标题;}var text=truncate('truncate text to fit in 3 lines',14);console.log(文本);

目前不能,但将来可以使用文本溢出:ellipis lastline。目前,它可以在中使用供应商前缀Opera 10.60+:示例