With CSS, use ... for overflowed block of multi-lines
There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:
- http://pvdspek.github.com/jquery.autoellipsis/
- http://dotdotdot.frebsite.nl/
- http://keith-wood.name/more.html
- http://github.com/tbasse/jquery-truncate
There also some preformance tests.
Applying an ellipsis to multiline text
I finally found a solution to do what I want.
As p
a paragraphe and article
the wrapper.
If you want to apply ellipsis to p
depending on article
height (which also depends on window height), you need to get the height
of the article
, the line-height
of the p
and then articleHeight/lineHeight
to find the number of line-clamp
that can be added dynamically then.
The only thing is the line-height
should be declared in the css file.
Check the following code. If you change the height of the window, the line-clamp
will change. Can be great to create a plug-in aiming to do that.
jsfiddle
function lineclamp() { var lineheight = parseFloat($('p').css('line-height')); var articleheight = $('article').height(); var calc = parseInt(articleheight/lineheight); $("p").css({"-webkit-line-clamp": "" + calc + ""});}
$(document).ready(function() { lineclamp();});
$( window ).resize(function() { lineclamp();});
article { height:60%; background:red; position:absolute;}
p { margin:0; line-height:120%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>
Text overflow ellipsis on two lines
I'm not sure if you have seen this article, but Chris Coyier's excellent CSS-Tricks.com posted a link to this a while back and it's a pure CSS solution that accomplishes exactly what you seek.
(Click to View on CodePen)
html,
body,
p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA;
}
.ellipsis:before {
content: "";
float: left;
width: 5px;
height: 200px;
}
.ellipsis>*:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 3em;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
<div class="ellipsis">
<div>
<p>
Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of
driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing
up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off –
then, I account it high time to get to sea as soon as I can.
</p>
</div>
</div>
Cutoff multiple lines of text with text-overflow: ellipsis
You can use the webkit-line-clamp property - This property allows you to only show the lines you need so you can put 6
or 2
etc it is up to you. example below:
.card { width: 400px; height: 150px; background: white; border: 1px solid #EAEAEA; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.18); padding: 20px;}
h4 { margin: 0;}
p { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;}
<div class="card"> <h4>Test</h4> <p> A test or examination (informally, exam) is an assessment intended to measure a test-taker's knowledge, skill, aptitude, physical fitness, or classification in many other topics (e.g., beliefs).[1] A test may be administered verbally, on paper, on a computer, or in a confined area that requires a test taker to physically perform a set of skills. Tests vary in style, rigor and requirements. For example, in a closed book test, a test taker is often required to rely upon memory to respond to specific items whereas in an open book test, a test taker may use one or more supplementary tools such as a reference book or calculator when responding to an item. </p></div>
How can I do text-overflow: ellipsis on two lines?
Add a span
to the container, which will hold the text:
<div class="container">
<span>text...</span>
</span>
Add this CSS:
.container {
overflow: hidden;
position: relative;
background: white; //or other color
}
.container:after {
content: '...'; //the ellipsis
position: absolute; //positioned in bottom-right
bottom: 0; //...
right: 0; //...
padding: 0 0.3em; //give some separation from text
background: inherit; //same color as container
}
.container span:after {
content: '\0000a0'; //a space
position: absolute; //to cover up ellipsis if needed
width: 1000px; //...
z-index: 1; //...
background: white; //must match container's color. can't use inherit here.
}
Fiddle
Resize the container, and you'll see that the ellipsis displays only as necessary.
Should work in all modern browsers.
Related Topics
How to Set Input Type Date'S Default Value to Today
How to Make Css3 Rounded Corners Hide Overflow in Chrome/Opera
Why Does Styling the Background of the Body Element Affect the Entire Screen
How to Remove the Arrow from a Select Element in Firefox
Invert CSS Font-Color Depending on Background-Color
How to Display an Unordered List in Two Columns
Using Flex Order Property to Re-Arrange Items For Desktop and Mobile Views
Should I Specify Height and Width Attributes For My Imgs in Html
With Css, Use "..." For Overflowed Block of Multi-Lines
Margin-Top Push Outer Div Down
How to Get This CSS Text-Decoration Override to Work
Using ≪Style≫ Tags in the ≪Body≫ With Other Html
How to Change the Color of Radio Buttons
When to Use the !Important Property in Css