1、多行文本显示省略号
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
2、文本两端对齐
text-align: justify;
text-align-last: justify;
/*兼容 ie*/
text-justify: distribute-all-lines;
3、单行文本溢出显示省略号
/* 1.强制文本一行显示除非遇到 br */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
4、文本竖行显示
/* 文本从 left ➡ right */
writing-mode: vertical-rl;
/* 文本从 right ➡ left */
writing-mode: vertical-rl;
5、数字 / 单词 换行显示
word-break: break-all;
6、flex布局设置弹性盒子不压缩
flex-shrink: 0;
7、对已有样式设置不生效
属性: unset;
/* 举例 */
/* 某个UI库中有个样式,比如 margin-left: 10px; 而这个样式我们不需要,设置为 0 也不成,此时,我们就可以将这个 margin 的属性值 设置为 unset */