前端开发小技巧 - 【CSS】 - 多行文本省略号 + 文本两端对齐 + 文本竖行显示 + 数字/单词换行 + flex弹性盒子不压缩 + 对已有样式设置不生效

352 阅读1分钟

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;

image.png

5、数字 / 单词 换行显示

word-break: break-all;

6、flex布局设置弹性盒子不压缩

flex-shrink: 0;

7、对已有样式设置不生效

属性: unset;

/* 举例 */
/* 某个UI库中有个样式,比如 margin-left: 10px; 而这个样式我们不需要,设置为 0 也不成,此时,我们就可以将这个 margin 的属性值 设置为 unset */