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.
The HTML <Textarea>maxlength attribute is used to specify the maximum number of characters enters into the Textarea element. Attribute Value: number: It contains single value number which allows the maximum number of character in Textarea element. Its default value is 524288.
val(); var lines = text. split(/(\r\n|\n|\r)/gm); for (var i = 0; i < lines. length; i++) { if (lines[i]. length > maxLength) { lines[i] = lines[i].
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;
}
Not characters, but you can set a width of an element in pixels and use text-overflow property which should add "...".
Also, you can limit number of lines by setting height of an element to, for instance, 30px and setting line-height CSS property to 15px and add overflow:hidden
. That way you will have exact two lines of text.
.twoLines{
height:30px;
line-height:15px;
overflow:hidden;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With