会用到但是不记得的那些css属性

原创于 2021-11-20 16:33:31 发布 · 339 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍如何使用CSS处理文本溢出问题，包括单行和多行文本的处理方式，并展示了一种利用CSS边框属性创建三角形角标的简洁方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 一行文本超出 ...

overflow: hidden;            
text-overflow:ellipsis;     //当文本溢出包含它的元素时，应该如何显示 
white-space: nowrap;        //规定段落中的文本不进行换行

2. 多行文本超出显示 ...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3.使用 css 写出一个三角形角标

元素宽高设置为 0，通过 border 属性来设置，让其它三个方向的 border 颜色为透明或者和背景色保持一致，剩余一条 border 的颜色设置为需要的颜色。

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}