<div v-for="(item,index) in list" :key="index1" :title="item">
<div v-html="item" class="text"></div>
</div>
高70的一个两行数据 css:
div {
overflow: hidden;
height: 70px;
}
div .text {
float: right;
margin-left: -5px;
width: 100%;
word-break: break-all;
}
div::before {
float: left;
width: 5px;
content: '';
height: 60px;
}
div::after {
float: right;
content: '...';
height: 60px;
line-height: 30px;
padding-right: 5px;
text-align: right;
width: 3em;
margin-left: -3em;
position: relative;
left: 100%;
top: -30px;
padding-right: 5px;
/* 显示更好的效果 */
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(255, 255, 255, 0)),
to(white),
color-stop(50%, white)
);
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
```
效果:
