Ale*_*ana 4 html css ellipsis vertical-alignment css-tables
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：博士；如何应用text-overflow:ellipsis;到使用display:table-cell; vertical-align:middle;父元素设置为居中的元素display:table;？使用另一种方式垂直对齐文本将起作用。
使CSS省略号与table一起工作的关键是设置table-layout: fixed，并且在固定表格布局的情况下，还需要定义width，否则将无法正常工作。看这个简单的例子：
.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>除了 table，你还可以使用 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>| 归档时间： |
|
| 查看次数： |
5400 次 |
| 最近记录： |