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.
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>