Alesana Alesana - 7 months ago 92
HTML Question

CSS "text-overflow: ellipsis" and vertically center an element

TL:DR; at bottom.

I have been looking for an answer to this for about 6 hours, trying different solutions, making nested elements deeper than should ever be made just trying to figure this one out.

I have a div that is responsive, changes width and height respectively. In it, I have 4 divs that I want to display evenly. In doing that I made each one

height:25%; display:table;
, and inside it a
<p>
element with
display:table-cell; vertical-align:middle;
. It works perfectly, but I want to add
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
to it. It seems I just simply can't have it both ways. To vertically align it, it must be
display:table;
. To give it
text-overflow:ellipsis
, it must be
display:block;
or
display:inline-block;
. How can I achieve both effects via CSS alone?

To make sure the solution would work for my situation I have written out an almost exact example of what I have at http://codepen.io/anon/pen/PNeqMM.



.content {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.wholepost {
background-color: #ffff00;
border: 1px solid #000;
position: relative;
width: 100%;
height: auto;
display: table;
/*Displayed as table to vertically align other (unrelated) DIVs */
}
/*otherdiv contains image that set's DIV height*/

.otherdiv {
width: 22%;
height: auto;
}
.imagecontainer {
width: 90%;
height: auto;
padding: 5%;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.textcontainer {
position: absolute;
width: 55%;
box-sizing: border-box;
padding-right: 200px;
/*Note that I would like the text to cut off when it hits the start of the padding instead of the end */
white-space: nowrap;
overflow: hidden;
margin-left: 22%;
padding-left: 2%;
left: 0;
top: 5%;
height: 90%;
background-color: rgba(0, 0, 0, 0.4);
}
.diva,
.divb,
.divc,
.divd {
height: 25%;
display: table;
width: 50%;
}
.diva p,
.divb p,
.divc p,
.divd p {
display: table-cell;
vertical-align: middle;
margin: 0;
}

<body>
<div class="content">
<div class="wholepost">
<div class="otherdiv">
<div class="imagecontainer">
<img src="http://www.pinevalleyfoods.com/wp-content/blogs.dir/26/files/2014/02/sample-image-square-300x300.jpg" </div>
</div>
<div class="textcontainer">

<div class="diva">
<p>This is some text in DIV 1A(it fits)</p>
</div>


<div class="divb">
<p>This is a link in DIV B. One of the divs contains another paragraph. As you can see this does not fit. I want it to be ellipsed
</p>
</div>

<div class="divc">
<p>And to show an example of the third div I will use a paragraph that also doesn't fit in the DIV. I would like this to be ellipsed as well.</p>
</div>

<div class="divd">
<p>But the fourth DIV fits nicely.</p>
</div>

</div>
</div>
</div>
</body>





TL:DR; How can I apply
text-overflow:ellipsis;
to an element that is centered using
display:table-cell; vertical-align:middle;
with a parent element set as
display:table;
? Using another way to vertically align the text will work.

Answer

The key to make CSS ellipsis to work with table is to set table-layout: fixed, and with fixed table layout, you also need to define the width, otherwise it won't work properly. See this simple example:

.table {
  width: 100%;
  height: 100px;
  outline: 1px solid;
  display: table;
  table-layout: fixed;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="table">
  <div class="table-cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean</div>
</div>

Other than table, you can also use flexbox:

.flexbox {
  height: 100px;
  outline: 1px solid;
  display: flex;
  align-items: center;
}
.flexbox-item {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="flexbox">
  <div class="flexbox-item">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean</div>
</div>

Comments