css 如何通过行或字符数限制字符数限制?
Posted
技术标签:
【中文标题】css 如何通过行或字符数限制字符数限制?【英文标题】:How to restrict character limit by line or # of characters with css? 【发布时间】:2012-11-28 20:22:33 【问题描述】:是否有可以执行以下操作之一的 css 属性?但首先,让我解释一下。
想象一个砌体布局,其中每个项目的宽度为:200px;每个都是 height: 250px; (这只是一个例子)。
在每个项目中,都有一个缩略图和一个链接,而且这个链接通常会换行到 2-3 行,因此每个项目的高度都不同。
有没有办法可以设置一个类中的最大字符数,或者在特定的行数之后切断换行?甚至可能添加一些 CSS 效果来插入内容:"...";在行尾之前表明它被切断了?
感谢任何帮助。
谢谢。
【问题讨论】:
text-overflow:ellipsis
可能是最接近您需要的。但是,旧版浏览器不支持它。
啊,完美,伙计。摆弄空白,文本溢出:省略号等,它给了我想要的东西。谢谢。
呵呵,我只是想为您创建一个示例小提琴,然后我看到了您的评论;)如果您的问题已经解决,您可以接受我的回答。快乐编码。干杯
【参考方案1】:
您可以尝试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;
【讨论】:
【参考方案2】:不是字符,但您可以设置元素的宽度(以像素为单位)并使用应添加“...”的text-overflow 属性。
此外,您可以通过将元素的高度设置为例如 30px 并将 line-height CSS 属性设置为 15px 并添加 overflow:hidden
来限制行数。这样,您将拥有准确的两行文本。
.twoLines
height:30px;
line-height:15px;
overflow:hidden;
【讨论】:
以上是关于css 如何通过行或字符数限制字符数限制?的主要内容,如果未能解决你的问题,请参考以下文章