想记录一些CSS使用的little tricks,每个小知识点不足以构成一篇博客,在此汇总记录,持续更新。
1. text-align: justify 在单行上不起作用怎么办
实现文本两端对齐:
text-align: justify;
多行文本:最后一行左对齐,其它行两端对齐;就像在word中设置两端对齐一样的效果;完美;
单行文本:那它就是最后一行了,那就不起作用了;
怎么办呢?
方法1:text-align-last: justify;
text-align-last: justify;
只对最后一行起作用,如果是多行文本的话,配合text-align: justify;
使用即可,当然如果是多行文本的话,我们通常不需要最后一样两端对齐。
网上说兼容性差,其实我觉得还可以了(参考MDN),除非你对浏览器兼容性很高的话,请参考方法2和方法3。
方法2:添加一个100%宽度的内联块状元素作为第二行
方法2和方法3都是处理成两行,骗过浏览器,然后再想办法让第二行隐藏即可,这样,看到的只是一行两端对齐的文本。
<div>
Lorem ipsum dolor sit<span></span>
</div>
div {
border: 1px solid;
width: 25%;
/* 关键样式 */
text-align: justify;
}
/* 关键样式 */
div>span {
display: inline-block;
width: 100%;
}
可见这样是显示第二行的空行的,当然不可以直接display: none
隐藏掉span元素,可以通过控制父元素高度啥的实现隐藏第二行。
方法3:使用after伪元素伪造100%宽度的第二行
方法2还要修改html,这个方法不用动html,要稍好一些,效果同上。
<div>
Lorem ipsum dolor sit
</div>
div {
border: 1px solid;
width: 25%;
/* 关键样式 */
text-align: justify
}
/* 关键样式 */
div::after {
content: "";
display: inline-block;
width: 100%;
}
2. CSS3 calc()函数
calc()用于计算长度值:
- 支持 “+”, “-”, “*”, “/” 运算;
- 支持任何长度值,包括百分比、像素数、整数等;
- 需要特别注意的是,运算符前后都需要保留一个空格,如:
width: calc(100% - 10px);
举个简单例子:使用calc()轻松实现左侧定宽、右侧自适应的两栏布局
我之前有使用定位+margin技巧很麻烦地实现;也可通过flex实现;这么简单的布局没必要使用flex的话,使用calc可轻松实现:
<div class="left">左侧定宽200px</div>
<div class="right">右侧自适应宽度</div>
div {
border: 1px solid;
height: 100vh;
float: left;
box-sizing: border-box;
}
.left {
width: 200px;
}
.right {
width: calc(100% - 200px);
}
扩展阅读:CSS 函数