几个常用CSS小技巧
2017-12-26 本文已影响0人
8d2855a6c5d0
1、表单标题上下字体对齐方法
项目中经常遇到各种表单，表单标题上下对齐是一个很常见的需求，但标题的字数通常并不一样如“用户名”，“密码”，为了使用户名和密码上下对齐在密码中加三个 ；
可以看到上下的字体两端并没有对齐，因为不同字体的一个空格宽度并不一定等于一个字的宽度，所以用空格对齐的这种办法是不行的。这里我们可以接借助text-align: justify;这个属性解决这个问题。具体的实现思路就是利用text-align: justify;实现两端对齐，但是text-align: justify;属性只对两行以上的段落生效，解决办法可以在文字容器内再加一个伪类，然后溢出隐藏多余的伪类。具体代码如下
<!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、强制英文换行
新手常遇到的一个问题是在html中英文单词不会自动换行，可以加上一个连字符解决换行问题，也可以使用word-break:break-all这条属性来使英文换行。
3、单行溢出隐藏
单行溢出隐藏在工作或者面试中也是经常会用到的。
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
4、多行溢出隐藏
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
