How can you use flexbox to vertically center text in a fixed height div without overflow above?

Question

The first line of text in the third .box rises above the top of the div and turns off. I would like it to look the same as the second box (well, ideally, like the second block plus ... ).

• Can this be done using flexbox?
• If not, can this be done with other CSS?
• If not, what is the best way to do this with JS?
• And in a separate note, why isn’t the first one centered on the text?

http://codepen.io/loren/pen/ojxORN

 <div class='box'> one line of text </div> <div class='box'> two lines of text lorem ipsum </div> <div class='box'> thre lines of text lorem ipsum sin dolor whatever etc </div> .box height 40px font-size 16px width 150px border 1px solid black margin-bottom 40px display flex align-items center text-align center overflow-y hidden 

Answer 1

When align-self evaluates to center , the flex element is centered on the transverse axis inside the line.

This is problematic if the flex element is larger than the flex container, because it will overflow it both above and below. And if overflow not visible , the upper part will be cut.

To avoid this, you can center using auto fields :

 .box { display: flex; height: 40px; width: 150px; overflow: auto; border: 1px solid black; margin-bottom: 20px; font-size: 16px; text-align: center; } .box > div { margin: auto; } 

 <div class='box'> <div>one line of text</div> </div> <div class='box'> <div>two lines of text lorem ipsum</div> </div> <div class='box'> <div>thre lines of text lorem ipsum sin dolor whatever etc</div> </div> 

Note for each flexibility item, you must add margin: auto . However, you cannot select an anonymous flex element that completes the continuous run of texts in the flex container. So I wrapped the text in div elements that can be selected.

If you do not want to modify the HTML, you can use pseudo-elements.

 .box { display: flex; flex-direction: column; height: 40px; width: 150px; overflow: auto; border: 1px solid black; margin-bottom: 40px; font-size: 16px; text-align: center; } .box::before, .box::after { content: ''; margin-top: auto; } 

 <div class='box'> one line of text </div> <div class='box'> two lines of text lorem ipsum </div> <div class='box'> thre lines of text lorem ipsum sin dolor whatever etc </div> 

Answer 2

Question 1/2

Yes! You can do this with flexbox:

 .box { /* Firefox */ display: -moz-flex; -moz-justify-content: center; -moz-align-items: center; /* IE */ display: -ms-flex; -ms-justify-content: center; -ms-align-items: center; /* Chrome | Safari */ display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; /* Modern browsers */ display: flex; justify-content: center; align-items: center; height: 40px; width: 150px; overflow: hidden; border: 1px solid black; margin-bottom: 40px; font-size: 16px; text-align: center; } .truncate { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; /* IE */ -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; /* Other browsers */ } 

 <div class='box'> <p class="truncate">one line of text<p> </div> <div class='box'> <p class="truncate">two lines of text lorem ipsum<p> </div> <div class='box'> <p class="truncate">thre lines of text lorem ipsum sin dolor whatever etc<p> </div> 

If you like to use Sass / SCSS and Compass, your stylesheet will look like this:

 @import 'compass'; .box { @include flexbox(( display: flex, justify-content: center, align-items: center ), 1 2 3); height: 40px; width: 150px; overflow: hidden; border: 1px solid black; margin-bottom: 40px; font-size: 16px; text-align: center; } .truncate { @include ellipsis(); } 

Question 3

Javascript is required only if you want to truncate the text in several lines (on the second / third line, etc.). So, if this is the only line, CSS is the right way. Otherwise use succinct

Question 4

You do not see the text in the center because your .box has a display: flex property. Remove it and you will see it in the center

Answer 3

You can center one line of text by simply wrapping it in a <span> and giving it a width.

 <div class='box'> <span>one line of text</span> </div> div.box > span { width: 100%; } 

OR, you can apply the justify-content property to the flex container:

 .box { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ height: 40px; font-size: 16px; width: 150px; border: 1px solid black; margin-bottom: 40px; text-align: center; overflow-y: hidden; } 

In terms of adding an ellipsis ("...") to the text overflow, yes, it is possible, but it is difficult with multi-line text.

CSS has a text-overflow property that takes several values, including ellipsis . Unfortunately, ellipsis only works with single-line text.

CSS does not provide a standard way to apply ellipsis to multiline text. There are various workarounds, but they can be hit and skipped depending on the method and situation. See My answer here for more details: Applying an ellipse to multi-line text