Given a long string of content, I want to display just the first 2 lines of text. The container of this content is fluid and will resize to the browser's width. Regardless of the container's width, I want the text to always only show 2 lines. Is there a way to do this?
If there is no way to do the above, is there a way to restrict based on number of characters?
This snippet will help you.
Just Adjust Max-Height and Line-height for the change in font size.
.limit-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 21px; max-height: 48px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } A pure CSS solution would imply the use of a stated height for the text block and the ´text-overflow`property. This is rather difficult to achieve because CSS has no notion of lines. A JavaScript solution, instead, would imply a regular expression matching for the newline character.
I have idea of some workaround to solve your problem (couse I think this is not possible by css).
So, my solution works as follow:
var height = parseInt($("#foo").css("line-height")); var lineCount = 2; height *= lineCount; $("#foo").css("height", height + "px"); You take line-height of your container and set height of container to line-height * lineCount.
You can fix the height of the div and make overflow as hidden
div{ height:auto; max-height:40px; overflow:hidden; background:red } OR
Use simple Jquery method
$('p').condense({ellipsis:'…', condensedLength: 55}); 
width attribute so it'll just adjust to the width of the container, right? The problem is that there is a possibility that there will only be one line. By defining the height, that means the space used will always be the same regardless of content?
condense isn't a built-in jQuery function, and requires a plugin to use.