1薯酝、表單標(biāo)題上下字體對齊方法
項(xiàng)目中經(jīng)常遇到各種表單叛买，表單標(biāo)題上下對齊是一個很常見的需求，但標(biāo)題的字?jǐn)?shù)通常并不一樣如“用戶名”惜互，“密碼”布讹，為了使用戶名和密碼上下對齊在密碼中加三個 ；
可以看到上下的字體兩端并沒有對齊训堆，因?yàn)椴煌煮w的一個空格寬度并不一定等于一個字的寬度描验，所以用空格對齊的這種辦法是不行的。這里我們可以接借助text-align: justify;這個屬性解決這個問題蔫慧。具體的實(shí)現(xiàn)思路就是利用text-align: justify;實(shí)現(xiàn)兩端對齊挠乳，但是text-align: justify;屬性只對兩行以上的段落生效，解決辦法可以在文字容器內(nèi)再加一個偽類，然后溢出隱藏多余的偽類睡扬。具體代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div{
border: 1px solid black;
font-size: 20px;
}
span{
width:4em;
border: 1px solid green;
display: inline-block;
overflow: hidden;
height: 20px;
line-height: 20px;
text-align: justify;
}
span::after{
content: '';
display: inline-block;
width: 100%;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<span>用戶名</span><br>
<span>密碼</span>
</div>
</body>
</html>
效果圖
2盟蚣、強(qiáng)制英文換行
新手常遇到的一個問題是在html中英文單詞不會自動換行，可以加上一個連字符解決換行問題卖怜，也可以使用word-break:break-all這條屬性來使英文換行屎开。
3、單行溢出隱藏
單行溢出隱藏在工作或者面試中也是經(jīng)常會用到的马靠。
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
4奄抽、多行溢出隱藏
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
