有没有解决方案在div中的最后一行添加省略号,流体高度(20%)？
我-webkit-line-clamp在CSS中找到了这个函数,但在我的例子中,行号将取决于窗口大小.
p {
width:100%;
height:20%;
background:red;
position:absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. …我想display: flex;用于居中,同时...在文本溢出时也有溢出.看来,只要我介绍一下display: flex,省略号就会停止工作.关于如何将这两者结合起来的任何建议？JSFiddle:https://jsfiddle.net/silverwind/sw78h02b/1/
.target {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: red;
margin: 2rem;
display: flex; /* remove this to get ellipsis to show */
}<div class="target">
Text here is very very long that it will overflow the width of the containing element. Adding another sentence to make sure it will overflow.
</div>我试图在flex框元素中垂直集中纯文本.
我决定使用性能display:table-cell与vertical-align: middle.但它似乎在flexbox元素中无法正常工作.
如何在不使用包装器或定位的情况下垂直集中它,同时仍然用椭圆截断长文本？
.container {
width: 400px;
height: 400px;
font-weight: 700;
border: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
.item {
display: table-cell;
vertical-align: middle;
flex: 1 1;
background-color: cyan;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item:nth-of-type(2n) {
background-color: aliceblue;
}<div class="container">
<div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>