如何用css限制按行或字符数限制字符数？

是否有一个CSS属性，可以执行以下任一操作？但首先，让我解释一下。如何用css限制按行或字符数限制字符数？

想象一下，每个项目的宽度为200px的砌体布局;每个将是高度：250px; （这只是一个例子）。

在每个项目中都有一个缩略图和一个链接，并且通常这个链接会包装到2-3行，因此每个项目的高度都不相同。

有没有一种方法可以在一个班级中设置最大字符数，或者在特定行数后切断包装？甚至可以添加一些CSS效果来插入内容：“...”;在行结束之前显示它被切断了？

任何帮助表示赞赏。

谢谢。

来源

2012-12-11 popsicle

'文本溢出：ellipsis'可能是closesest到你所需要的。但是，它在旧版浏览器中不受支持。 – Christoph

啊完美，老兄。用白色空间，文本溢出：省略号等来摆弄，它给了我想要的东西。谢谢。 – popsicle

呵呵，我只是为你创建一个例子小提琴，然后我看到你的评论;）如果你的问题已经解决了，你可以接受我的答案。快乐的编码。干杯 – Christoph

你可以试试text-overflow，但是它有一些限制，但仍可能会适合你：

Example

<div id="container"> 
    This is some short content to demonstrate the css-property 
    text-overflow 
</div> 

#container{ 
    width:100px; 
    height:50px; 
    border:1px solid red; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap; 
}

来源

2012-12-11 10:00:11 Christoph

不是字符，但可以设置元素的宽度（以像素为单位），并使用text-overflow属性，该属性应添加“...”。

此外，您可以通过将元素的高度设置为（例如）30px并将行高CSS属性设置为15px并添加overflow:hidden来限制行数。这样你就会有两行文字。

.twoLines{ 
    height:30px; 
    line-height:15px; 
    overflow:hidden; 
}

来源

2012-12-11 09:59:15

如何用css限制按行或字符数限制字符数？

回答

相关问题