一些常用的css整理

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

在项目开发过程中，经常会需要用到一些需要记忆的css知识，虽然简单，但容易遗忘。本文就随机大致总洁几个常用的一些知识点，记录如下，以备后续使用方便查找。

文本溢出截断省略的方法

项目开发经常需要考虑文本太长，不够存储的情况，那么此时最好的方式就是限制宽度，然后将文本溢出截断省略，如下，分为单行文本和多行文本两种情况，代码如下，下图先贴上呈现效果：

单行文本溢出省略：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本溢出省略：

overflow: hidden;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;

其中：-webkit-line-clamp是用来限制在一个块元素显示的文本的行数。

利用css简单绘制三角形

在实际开发中，经常需要开发到如下图这种带有三角形图案的样式。那么，如何用最简单的css实现一个三角形呢？

可以利用边框border属性进行编写，如下代码，最终呈现如下图。

.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    border-top: 0;
}

如何清除浮动？

清除浮动是开发和面试过程都很经常被问到的一点，最简单的方式就是给浮动元素的容器添加overflow:hidden;或overflow:auto;来实现，但是这种方式并不能适应所有情况,毕竟有些情况是需要overflow的，那么常用的就是利用:after伪元素来清除浮动了。

代码如下，在需要清除浮动的元素添加clearfix类即可实现：

.clearfix:after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  zoom: 1; 
  }