CSS tricks

想记录一些CSS使用的little tricks，每个小知识点不足以构成一篇博客，在此汇总记录，持续更新。

CSS tricks

1. text-align: justify 在单行上不起作用怎么办
2. CSS3 calc()函数

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 函数

CSS tricks相关推荐

CSS Tricks网站创始人作序推荐，这本书助你成为Web开发高手
以下内容来自于 CodePen 联合创始人 Chris Coyier 为<深入解析CSS>一书写的序. "只需一分钟就能学会,却要用一辈子的时间去精通",这句话现在略显 ...
?Web开发者需要知道的CSS Tricks
作为一名Web开发者,CSS是必备技能之一,我一直以为自己对CSS的掌握已经够用了,直到读Lea Verou的<CSS揭秘>时,我发现自己充其量就算个会打CS的选手,书中针对我们常见的网页 ...
css技巧 ——CSS Tricks
垂直居中未知父元素高度 .parentElement {display: block;&:before {content: " ";display: inline-blo ...
CSS三角形如何工作？
本文翻译自:How do CSS triangles work? There're plenty of different CSS shapes over at CSS Tricks - Shapes ...
CSS溢出-x：可见; 和溢出-y：隐藏；导致滚动条问题
假设您有一些样式和标记: ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it ...
html标题标签最大值是多少,css – 样式HTML5进度标记,达到了它的最大值
这个答案假设我们知道进度条的最大值.我将使用以下标记: 我们的进度条最大值为100,值为100,表示它处于完成状态.由此我们可以使用[att=val] selector将其定位到完成状态: progr ...
拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了
简介: 这篇文章专门对比 Flutter Widget 的布局原理和 CSS 布局原理的差异,分享在对接过程中会遇到的问题和解决方案,帮大家理一理思路,内容可以分为这几部分:1.CSS 和 Widge ...
你知道css单位fr吗？
fr是css一个比较新潮的单位,在Grid布局中常见到它的身影. 这里回答了两个问题: fr是什么?能帮助解决什么问题? fr有趣的实践情况--和其他单位混合使用 fr是什么?能帮助解决什么问题? 这 ...
css 商城两列_CSS 居中？来一探究竟
文章作者:家园工作室研发组成员文章出处: CSS 居中?来一探究竟 | Wzb's Blogwzb.me 「居中」是进行布局时最常见的需求之一了.CSS 有多种居中的方式,在什么时候挑选适合的方案 ...

CSS tricks

CSS tricks

1. text-align: justify 在单行上不起作用怎么办

2. CSS3 calc()函数

CSS tricks相关推荐

最新文章

热门文章