Truncating text to specifc number of lines after formatting
css, javascript
Solution
You could use text-overflow:ellipses; but unfortunately this only works with `white-space:nowrap` which is I don't think you need.
What you can do is do `overflow:hidden` like you intended and fake ellipses with pseudo-element `:after`.
Imaginge you have you DIV with text:
<div id="text">
(really long text here)
</div>
Styled like this:
#text {
background:white;
width:150px;
height:100px;
position:relative;
overflow: hidden;
}
Just add to it
#text:after {
content:'...';
position:absolute;
bottom:0;
right:0;
background:inherit
}
And bingo: http://jsfiddle.net/tFZEb/3/
Problem
I am making a site which will display some videos from the YouTube API, and truncates the video description to 170 characters on the server side. They have to go in a narrow box so whenever it contains URLs or long words which make it wrap a lot, it can sometimes overflow out of the container. Is there a client side way to truncate the strings and add an ellipsis on the end (I could use overflow:hidden but I can't use an ellipsis with that. It's my last resort). Here below is an image of what I'm trying to do: