CSS实用技巧第一讲:文字处理
前言
作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。
CSS实用技巧第一讲:文字处理
本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。
文本对齐方式
CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也是非常的简单。
如下:
p{
text-align: center;
text-align: left;
text-align: right;
}
但是两端对齐你有用过吗?
只需要添加text-align-last:justify样式即可。请看示例:
<div class="justify-text">
<div class="li">账号</div>
<div class="li">密码</div>
<div class="li">电子邮件</div>
</div>
scss样式
.justify-text {
.li {
padding: 0 20px;
margin-top: 10px;
width: 100px;
background-color: #f13f84;
line-height: 40px;
text-align-last: justify;
color: #fff;
list-style: none;
&:first-child {
margin-top: 0;
}
}
}
CSS实用技巧第一讲:文字处理