如何使用css限制行的字符数或字符数？ [英] How to restrict character limit by line or # of characters with css?

问题描述

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

想象一个砖石布局，每个项目的宽度：200px;每个将是height：250px; （这只是一个例子）。

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

有一种方法，我可以设置一个类中的最大字符数，或者切断包装后一定的行数？甚至可以添加一些CSS效果来插入内容：...;

感谢您的帮助。

谢谢。

解决方案

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

示例

 < div id =container> 
这是一些简短的内容来演示css-property 
 text-overflow 
< / div> 
 
 #container {
 width：100px ; 
 height：50px; 
 border：1px solid red; 
 overflow：hidden; 
 text-overflow：ellipsis; 
 white-space：nowrap; 
} 
  

Is there a css property that can do one of the following? But first, let me explain.

Imagine a masonry layout where each item is width: 200px; and each would be height: 250px; (this is just an example).

In each item, there is a thumbnail and a link, and often times, this link wraps to 2-3 lines, and therefore makes the height of each item different.

Is there a way I can set a maximum # of characters within a class, or cut off wrapping after a certain # of lines? And perhaps even add some css effect to insert content: "..."; before the line end to show that it was cut off?

Any help is appreciated.

Thank you.

解决方案

You can try text-overflow, however it has some restrictions, but still might suite you:

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;   
}​

这篇关于如何使用css限制行的字符数或字符数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！