实现单行文本居中和多行文本左对齐并超出显示\"...\"

末鹿安然 提交于 2019-12-02 18:20:47
.one {
  text-align: center
}
多行文本:
.multi {
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
}不过可惜的是兼容性太差,可以用下面的这个

.multi-text{
width: 50%;
height: 4.5rem;
line-height: 1.5;
padding: 20px;
background: lightblue;
overflow: hidden;
position: relative;
box-sizing: border-box;

&::after{
content: '...';
height: 1.5rem;
position: absolute;
bottom: 5px;
right: 5px;
}
}

 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!