Multiple lines in a box with ellipsis and vertical alignment

Question

I have containers with dynamic content and several lines of text. I want to show the ellipsis (...) if the text does not fit in the container. It should also be vertically aligned in the middle.

I created Codepen http://codepen.io/anon/pen/ewnxG using this HTML:

<div class="vertically-centered">vertically centered with</div> <div class="vertically-centered">vertically centered with hello</div> <div class="vertically-centered">one line</div> 

and this CSS:

 .vertically-centered { border: 1px solid red; height: 6rem; overflow: hidden; font-weight: bold; font-size: 2.5rem; text-overflow: ellipsis; width: 300px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vertically-centered:after { content: ""; height: 100%; display: inline-block; vertical-align: middle; } 

In IE11 and Firefox, the ellipsis "..." is missing, this is normal for me. It works in Safari and Chrome.

You see that the first div not working, the text is disabled. The second and third div working. Therefore, my decision depends on the length of the text. How can I solve this problem without using JavaScript?

Answer 1

Please check this simple solution without additional markup:

 .vertically-centered { border: 1px solid red; height: 6rem; overflow: hidden; font-weight: bold; font-size: 2.5rem; text-overflow: ellipsis; width: 300px; line-height: 1.2; display: flex; /* enables centering for modern non-webkit browsers */ flex-direction: column; justify-content: space-around; /* centers for modern non-webkit browsers */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-box-pack: center; /* centers in -webkit-box automagically! */ } 

 <div class="vertically-centered">vertically centered with</div> <div class="vertically-centered">vertically centered with hello</div> <div class="vertically-centered">one line</div> 

You can also see this solution in action in the edited CodePen example .

How it works: your source code already uses the Flexbox layout for WebKit-based browsers (this is actually the obsolete Flexbox 2009 syntax, but unfortunately -webkit-line-clamp doesn’t work with new implementations). Flexbox has its own vertical centering mechanism. All you need to get the desired behavior in WebKit-based browsers is to remove the :after .vertically-centered add the following line of code to .vertically-centered instead:

  -webkit-box-pack: center; 

For other modern browsers, such as Firefox 22+ and IE11 +, you can use the same layout (except for the ellipse, but you said it was fine) is achieved using the new Flexbox version:

  display: flex; flex-direction: column; justify-content: space-around; 

The code should indicate display: -webkit-box above, so Webkit browsers can still use -webkit-line-clamp .

You can also make it work in IE10 by adding its prefix version of Flexbox (2011 transitional syntax):

  display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-pack: center; 

A handle with IE10 support is here: http://codepen.io/anon/pen/otHdm

The vertical centering :after approach did not work for you in the first cell for the following reason: for ilnine-level CSS fields (e.g. plain text, inline blocks, images, etc.) vertical-align adjusts the baselines of all such boxes that form string field (see CSS2.1 specification ). The line height of the line is calculated so that all the lines of the line level in the line fit into it, so the line height of the line cannot be less than the height of the highest built-in box. Thus, your built-in :after block, which receives 100% of the container’s height, becomes the highest element in the last line of your block, and because of vertical-align: middle source text in this last line moves in accordance with the vertical middle of the text with the middle of this tall built-in unit. This is normal when there is only one lime (this is a typical use case for such centering), and when the last line is hidden with overflow , but not OK when it is visible).

Answer 2

here you can find a simplified solution:

 .vertically-centered { margin: 0 auto; border: 1px solid red; font-size: 50px; width: 300px; display: -webkit-flex; -webkit-align-items: center; } .vertically-centered p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 106px; /* set max-height for ie */ } 

for such markup:

 <div class="vertically-centered"><p>vertically centered with</p></div> <div class="vertically-centered"><p>vertically centered with hello</p></div> <div class="vertically-centered"><p>one line</p></div> 

example: http://codepen.io/srekoble/pen/pHgjf

As you will see, you can wrap your text inside the p tag so that you can apply the truncate method to the p tag and the vertical alignment method to the div tag

Answer 3

This is achievable, but will require some markup changes.

• Add div text around text
• Add a .vertically-centered div selector with the following rules:
  • display: inline-block; as a reserve for browsers without web kit needed for vertical alignment
  • display: -webkit-inline-box; for web browsers
  • max-height: 100%; to make sure the div is only tall than the text if it is smaller than the container and taller than the container if it grows larger than it
  • vertical-align: middle; so that the div is in the middle of the container
• Move the rules for ellipses from .vertically-centered to .vertically-centered div

Why do I need an extra div?

The text itself is a string, so only the last line is aligned vertically to the :after pseudo-element. So:

• The first example does not look right, because the line with the "centered" is aligned vertically to the middle of the pseudo-element.
• The second example looks fine, because the hidden "hello" is vertically aligned, other lines in any case fit the entire field.
• The third example is the only one that actually aligns vertically in the middle using this method.

To see this clearly when the .vertically-centered:after action changes to .vertically-centered:before , you will see that now the first line is “vertically” in the middle.

Adding an additional container allows you to align the contents of all text vertically, and not just one line.

Pen Code: http://codepen.io/anon/pen/htbxA

 .vertically-centered { border: 1px solid red; height: 6rem; overflow: hidden; font-weight: bold; font-size: 2.5rem; width: 300px; line-height: 1.2; } .vertically-centered:after { content: ""; height: 100%; display: inline-block; vertical-align: middle; } .vertically-centered div { display: inline-block; display: -webkit-inline-box; max-height: 100%; vertical-align: middle; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 

 <div class="vertically-centered"><div>vertically centered with</div></div> <div class="vertically-centered"><div>vertically centered with hello</div></div> <div class="vertically-centered"><div>one line</div></div> 

Answer 4

I changed my CSS a bit. I added some additions to the vertically centered div and set the width of the vertically centered: after div and presto! I believe the problem was that the width was not defined in .vertically-centered: after the div. here is my solution

  .vertically-centered { border: 1px solid red; height: 6rem; overflow: hidden; padding: 10px; font-weight: bold; font-size: 2.5rem; text-overflow: ellipsis; width: 300px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vertically-centered:after { content: ""; height: auto; width: 100%; display: inline-block; vertical-align: middle; } 

Hope this helps!

Answer 5

If you put the text inside the div inside the <p></p> and add this:

 .vertically-centered p { margin: 0; display:block; transform: translateY(-50%); top:50%; position:relative; } 

Then he has to do the trick.

Answer 6

Impossible if you want this to work in Internet Exporer.

Here are quite a few examples that work in IE:

• Fade Out Way (CSS!)
• Clamp.js Way (javascript)
• TextOverflowClamp.js Way (javascript)

Personally, I use http://dotdotdot.frebsite.nl/