整理場(chǎng)景的css
###目錄
1、
- 1宪卿、使用 text-align-last 對(duì)齊兩端文本
- 代碼
<div class="bruce flex-ct-x"> <ul class="justify-text"> <li>賬號(hào)</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文本超出隱藏 顯示三個(gè)點(diǎn)
文本超出顯示三個(gè)點(diǎn)一般分兩種情況
一,單行文本超出隱藏
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; //行數(shù)需設(shè)置
line-clamp: 3;
-webkit-box-orient: vertical;
單行設(shè)置寬 多行設(shè)置寬高不然不會(huì)生效
