13

是否有可以执行以下操作之一的 css 属性？但首先，让我解释一下。

想象一个砌体布局，其中每个项目的宽度：200px；每个都是 height: 250px; （这只是一个例子）。

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

有没有办法我可以在一个类中设置最大字符数，或者在特定行数之后切断换行？甚至可能添加一些 CSS 效果来插入内容："..."; 在行结束之前表明它被切断了？

任何帮助表示赞赏。

谢谢你。

4

2 回答 2

25

您可以尝试text-overflow，但它有一些限制，但仍可能适合您：

例子

<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-11T10:00:11.713 回答
9

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

此外，您可以通过将元素的高度设置为例如 30px 并将 line-height CSS 属性设置为 15px 并添加来限制行数overflow:hidden。这样，您将拥有准确的两行文本。

.twoLines{
   height:30px;
   line-height:15px;
   overflow:hidden;
}
于 2012-12-11T09:59:15.707 回答