157

I want to wrap a text within only two lines inside div of specific width. If text goes beyond the length of two lines then I want to show ellipses. Is there a way to do that using CSS?

e.g.

Sample text showing wrapping of text in only two line...
Improve this question
1
  • This question is similar to: Limit text length to n lines using CSS. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. Commented Sep 8, 2024 at 6:46

14 Answers 14

Reset to default
200

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I only see one line going across for some reason :/
The second example has only one line, when the requested solution requires two.
The third example does not work for me, tested in Chrome and Firefox.
In that broken example white-space: nowrap; breaks it, if you comment it out it works.
Did someone change something in 2022? I used to do this and worked like a charm, but it seems it doesn't work anymore in my browser. I tested it in Chrome and Firefox, but ellipses are not shown. Even in the jsFiddle. See other answer by @vinesh stackoverflow.com/a/32585024/5830500 this works.
116

Another simple and quick solution

.giveMeEllipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: N; /* number of lines to show */ line-height: X; /* fallback */ max-height: X*N; /* fallback */ }

The reference to the original question and answer is here

Improve this answer

5 Comments

Amazing solution! I haven't fully tested it, but at first try, this works very well
@vinesh this solution is on fire! 🔥
Seems box-orient is deprecated or obsolete.
Works! Tested this inside a mat-card-content in a flexbox container
For Firefox (and firefox Android) box-orient Can be enabled by setting layout.css.prefixes.webkit = true and changing the CSS to -moz-webkit-box
35

CSS only

 overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
Improve this answer

2 Comments

This, requires box-orient property set to vertical but box-orient is non-standart. developer.mozilla.org/en-US/docs/Web/CSS/box-orient
Please explain your code as it will make it more helpful for others.
23

The best one I've seen which is CSS only and responsive comes from Mobify Developer Blog - CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS:

JS Fiddle Example

CSS:

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: -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); }

Html:

<div class="ellipsis"> <div class="blah"> <p>Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; 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 &ndash; then, I account it high time to get to sea as soon as I can.</p> </div> </div>
Improve this answer

1 Comment

The best solution I've seen so far. You might want to reduce the height (200px) variable in the fiddle, for my screen size the text did not overflow initially.
17

CSS only solution for Webkit

// Only for DEMO $(function() { $('#toggleWidth').on('click', function(e) { $('.multiLineLabel').toggleClass('maxWidth'); }); })
.multiLineLabel { display: inline-block; box-sizing: border-box; white-space: pre-line; word-wrap: break-word; } .multiLineLabel .textMaxLine { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* Only for DEMO */ .multiLineLabel.maxWidth { width: 100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="multiLineLabel"> <span class="textMaxLine">This text is going to wrap automatically in 2 lines in case the width of the element is not sufficiently wide.</span> </div> <br/> <button id="toggleWidth">Toggle Width</button>

Improve this answer

4 Comments

This the best solution and must be marked as an answer. Thanks.
-webkit-box-orient This feature is deprecated/obsolete and should not be used. caniuse.com/?search=box-orient
Please explain your code as it will make it more helpful for others.
I just found out, that there is no need to put any CSS on div, just put on span, and it works, and only works on span
16

I believe the CSS-only solution text-overflow: ellipsis applies to one line only, so you won't be able to go this route:

.yourdiv { line-height: 1.5em; /* Sets line height to 1.5 times text size */ height: 3em; /* Sets the div height to 2x line-height (3 times text size) */ width: 100%; /* Use whatever width you want */ white-space: normal; /* Wrap lines of text */ overflow: hidden; /* Hide text that goes beyond the boundaries of the div */ text-overflow: ellipsis; /* Ellipses (cross-browser) */ -o-text-overflow: ellipsis; /* Ellipses (cross-browser) */ }

Have you tried http://tpgblog.com/threedots/ for jQuery?

Improve this answer

2 Comments

as I mentioned, combining ellipses with multiple lines of text doesn't appear to work, at least not for me in Chrome.
This worked in my current problem after I added: display: block and min-height: 13px and max-height: 26px for setting height for a <td>
7

Try something like this: http://jsfiddle.net/6jdj3pcL/1/

<p>Here is a paragraph with a lot of text ...</p> p { line-height: 1.5em; height: 3em; overflow: hidden; width: 300px; } p::before { content: '...'; float: right; margin-top: 1.5em; }
Improve this answer

1 Comment

I don't find this solution ideal because it adds ellipsis even if the text doesn't overflow or even if the text fits in one line.
5

Typically a one-line truncate is quite simple

.truncate-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Two line truncate is a little bit more tricky, but it can be done with css this example is in sass.

@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) { overflow: hidden; /* hide text if it is more than $lineCount lines */ position: relative; /* for set '...' in absolute position */ line-height: $lineHeight; /* use this value to count block height */ max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */ padding-right: $padding-right; /* place for '...' */ white-space: normal; /* overwrite any white-space styles */ word-break: break-all; /* will break each letter in word */ text-overflow: ellipsis; /* show ellipsis if text is broken */ &::before { content: '...'; /* create the '...'' points in the end */ position: absolute; right: $ellipsis-right; bottom: 0; } &::after { content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */ position: absolute; right: 0; width: $width; height: 1rem * $lineCount; margin-top: 0.2rem; background: $bgColor; /* because we are cutting off the diff we need to add the color back. */ } }
Improve this answer

Comments

3

See http://jsfiddle.net/SWcCt/.

Just set a line-height the half of height:

line-height:20px; height:40px;

Of course, in order to make text-overflow: ellipsis work you also need:

overflow:hidden; white-space: pre;
Improve this answer

2 Comments

This solution isnt flexible and requires a manual line break in the source text. Note that jsfiddle.net/SWcCt/282 each box only contains one line of text. The desired solution would look like the 2nd box of jsfiddle.net/SWcCt/283 except with an ellipsis at the end of the 2nd line.
@JoshuaCoady Good point, but text-overflow: ellipsis only works for inline boxes which overflow the line box. Without white-space: pre they would just go to the next line box. And then a manual line break is needed. I don't think there is a perfect solution.
2 
<tag> { max-height: calc(2 * 1.5em); /* 2 lines of 1.5em each */ line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; }

This code uses the -webkit-box and -webkit-line-clamp properties to achieve the desired effect of showing only 2 lines of text and then adding ellipses for any remaining text. The max-height property sets the maximum height of the p element to 3em (2 lines of 1.5em each), and line-height sets the height of each line to 1.5em. The overflow property is set to hidden to hide any overflow beyond the maximum height, and text-overflow is set to ellipsis to add ellipses for any hidden text.

Improve this answer

Comments

1

@Asiddeen bn Muhammad's solution worked for me with a little modification to the css

 .text { line-height: 1.5; height: 6em; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
Improve this answer

1 Comment

Please explain your code as it will make it more helpful for others.
0

I have the answer for this "Achieving both multiple lines of text and ellipses appears to be the realm of Javascript".

WebkitLineClamp: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp WebKItBoxOrient:https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

`.textWithTwoLine { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }`
Improve this answer

1 Comment

Please explain your code as it will make it more helpful for others.
0

Below worked for me:

CSS:

.longWordBreakParent { display: flex; } .longWordBreak { word-break: break-all; }

HTML:

<div className="longWordBreakParent"> <span className='longWordBreak'>someverylongtextthatcannotbefitinoneline</span> </div>

For more details, see:
. https://developer.mozilla.org/en-US/docs/Web/CSS/display
. https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Improve this answer

3 Comments

Please explain your code as it will make it more helpful for others.
Just like others, got that answer after a lot of trials in Chrome console. For more details, please see developer.mozilla.org/en-US/docs/Web/CSS/display and developer.mozilla.org/en-US/docs/Web/CSS/word-break .
I meant as an edit.
-3

In all these examples, let’s assume we have:

#someDiv { width: 250px; overflow: hidden; }
Improve this answer

2 Comments

How this make sure that only 2 lines are shown? It only deals with the width of the div.
Please explain your code as it will make it more helpful for others. Please also use a comment for this type of message.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.