CSS零碎

CSS自动换行、强制不换行、强制断行、超出显示省略号

使用white-space属性
强制不换行
p { white-space:nowrap; }

自动换行
p { word-wrap:break-word; }

强制英文单词断行
p { word-break:break-all; }

*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

超出显示省略号
p{text-overflow:ellipsis;overflow:hidden;}

CSS做三角形

第一版：

div{
  width: 0;
  border-top: 50px solid black;
  border-left: 50px solid red;
  border-bottom: 50px solid blue;
  border-right: 50px solid green;
}

image.png

第二版：

div{
  width: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid red;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
}

image.png

第三版：

div{
  width: 0;
  border: 50px solid transparent;
  border-left-color: red;
}