CSS 小技巧

这篇文章记录在实践中用到的一些css小技巧💡

1. 文本省略

一行省略

.demo {
    overflow: hidden;  /* 溢出隐藏 */
    white-space: nowrap;  /* 规定段落中的文本不进行换行 */
    text-overflow: ellipsis;  /* 溢出用省略号显示 */
}

一行或多行省略

.demo {
    overflow: hidden;  /* 溢出隐藏 */
    word-break: break-all;
    text-overflow: ellipsis;  /* 溢出用省略号显示 */
    display: -webkit-box;  /* 作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 2;  /* 显示的行数 */
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;  /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
}

2. 将网站文字变成繁体字

document.body.style.fontVariantEastAsian='traditional';

3. 将网页元素使用细线标记出来

[].forEach.call($$('*'), function(a) {
    a.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
});

4. 文本换行

单标签文本换行

word-break: break-all ：任意字符间换行

word-break: break-word：单词结束换行

line-break: anywhere：任意位置换行，主要解决中日韩文中标点符号不能出现在句首的问题

多标签文本换行

<div>
    <span>我是第一个span标签</span>
    <span>我是第二个span标签</span>
    <span>我是第三个span标签</span>
</div>

⚠️ 注意：如果发现 span 标签之间有空格，可以将span标签放在同一行展示。

5. 网页变成黑白配色

在 html 或 body 上添加：

filter: grayscale(1);

6. 文本两端对齐

.text {
  width: 130rpx;
  display: inline-block;
  text-align: justify;
  overflow: hidden;
  height: 35rpx;
  line-height: 1;
}
.text {
  content: '';
  display: inline-block;
  margin-left: 100%;
}

持续更新中... ⌛️