如何用css限制字符数或字符数?

pop*_*cle 13 css layout character-limit word-wrap

是否有可以执行以下操作之一的css属性?但首先,让我解释一下.

想象一下砌体布局,每个项目的宽度为:200px; 每个都是高度:250px; (这只是一个例子).

在每个项目中,都有一个缩略图和一个链接,通常,此链接包含2-3行,因此每个项目的高度不同.

有没有办法可以在一个类中设置最大字符数,或者在某些行之后切断包装?甚至可能添加一些css效果来插入内容:"......"; 在行结束之前显示它被切断了?

任何帮助表示赞赏.

谢谢.

Chr*_*oph 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;   
}?
Run Code Online (Sandbox Code Playgroud)


Vik*_* S. 9

不是字符,但您可以设置元素的宽度(以像素为单位)并使用text-overflow属性,该属性应添加"...".

此外,您可以通过将元素的高度设置为30px并将line-height CSS属性设置为15px并添加来限制行数overflow:hidden.这样你就会有两行文字.

.twoLines{
   height:30px;
   line-height:15px;
   overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)