13

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.

popsicle
  • 419
  • 1
  • 5
  • 15
  • 4
    `text-overflow:ellipsis` is probably the closesest to what you need. However, it's not supported in older browsers. – Christoph Dec 11 '12 at 09:54
  • Ah perfect, dude. Fiddled around with white-space, text-overflow: ellipsis, and such, and it gave me exactly what I wanted. Thanks. – popsicle Dec 11 '12 at 10:01
  • hehe, i was just about creating an example fiddle for you, then i saw your comment;) You can accept my answer, if your problem has been solved with that. happy coding. Cheers – Christoph Dec 11 '12 at 10:02

2 Answers2

26

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;   
}​
Christoph
  • 50,121
  • 21
  • 99
  • 128
9

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;
}
Viktor S.
  • 12,736
  • 1
  • 27
  • 52