整理场景的css
###目录
1、
- 1、使用 text-align-last 对齐两端文本
- 代码
<div class="bruce flex-ct-x"> <ul class="justify-text"> <li>账号</li> <li>密码</li> <li>电子邮件</li> <li>通讯地址</li> </ul> </div> .justify-text { li { margin-top: 5px; padding: 0 20px; width: 100px; height: 40px; background-color: #f66; line-height: 40px; text-align-last: justify; color: #fff; &:first-child { margin-top: 0; } } }-
效果
2、css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况
一,单行文本超出隐藏
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
二,多行文本超出隐藏
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //行数需设置
line-clamp: 3;
-webkit-box-orient: vertical;
单行设置宽 多行设置宽高不然不会生效
参考
网页布局
