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>
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.
css ellipsis on second line
A requirement for text-overflow: ellipsis;
to work is a one-line version of white-space
(pre
, nowrap
etc). Which means the text will never reach the second line.
Ergo. Not possible in pure CSS.
My source when I was looking for the exact same thing just now: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)
EDIT If the good CSS gods will implement http://www.w3.org/TR/css-overflow-3/#max-lines we can haz this in pure CSS using fragments
(new) and max-lines
(new). Also some more info on http://css-tricks.com/line-clampin/
EDIT 2 WebKit/Blink has line-clamp
: -webkit-line-clamp: 2
will put ellipsis on 2nd line.
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>
How to add ellips to 2 line text in css?
You need to update your .portalTitle
class style with
margin: auto;
margin-left: 10px;
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.5em;
max-height: 3.2em;
overflow: hidden;
display: block;
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
Here, the below css is limiting the content to 2 lines.
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
.details { display: inline-flex; /* text-align: center; */ /* display:block; */ /* display:table-cell; vertical-align:middle; */ /* background-color: grey; */ margin-right: 5px; /* width: 95%; */ width: 340px; height: 75px; cursor: pointer; text-align: left;}
.portalTitle { margin: auto; margin-left: 10px; font: Arial; font-family: sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5em; max-height: 3.2em; overflow: hidden; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.profileImg { cursor: pointer; max-width: 45px; height: 45px; border-radius: 25px; /* margin-top: 10px; */ /* margin: auto; */ margin: auto 2px; object-fit: cover;}
<div class="details"> <img class="profileImg" src="images/testImg.png" /> <span class="portalTitle"> Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!. Shanghai, China night sounds sounds and more more more sounds look at all those sounds!</span></div>
Wrap a text within only two lines inside div
Limiting output to two lines of text is possible with CSS, if you set the line-height
and height
of the element, and set overflow:hidden;
:
#someDiv {
line-height: 1.5em;
height: 3em; /* height is 2x line-height, so two lines will display */
overflow: hidden; /* prevents extra lines from being visible */
}
--- jsFiddle DEMO ---
Alternatively, you can use the CSS text-overflow
and white-space
properties to add ellipses, but this only appears to work for a single line.
#someDiv {
line-height: 1.5em;
height: 3em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
And a demo:
--- jsFiddle DEMO ---
Achieving both multiple lines of text and ellipses appears to be the realm of javascript.
How to add an ellipsis on the third line of text?
You can truncate the text using line-clamp
. The ellipsis effect comes from using display: -webkit-box;
and -webkit-box-orient: vertical;
paired with overflow: hidden;
.
.post-desc {
width: 100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
border: 1px solid #000000;
}
<p class="post-desc">This is some long text that will not fit in the box.</p>
Related Topics
How to Correctly Select the First or the Last Child With Css
How to Update Non-Jsf Components (Plain Html) With Jsf Ajax
How to Align Two Divs Horizontally
Style Input Element to Fill Remaining Width of Its Container
Why Should I Prepend My Custom Attributes with "Data-"
An 'Ul' Element Can Never Be a Child of a 'P' Element
How to Make an Entire HTML Form "Readonly"
Why Use Protocol-Relative Urls at All
Grid Areas Not Laying Out Properly in CSS Grid
Hide Textfield Blinking Cursor
Accessing Object in Iframe Using Vba
Media Queries For Different Zoom Levels of Browser
Swift: Display HTML Data in a Label or Textview
How to Create a Curve Between Two Gradient Using CSS
Can You Have Multiline HTML5 Placeholder Text in a <Textarea>