前言

一些自己常用但总是忘记怎么写的样式

超出部分显示省略号

1. 第一种

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

2. 第二种

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

居中

1. 垂直居中

position: relative;
top: 50%;
transform: translateY(-50%);

2. 水平居中

position: relative;
left: 50%;
transform: translateX(-50%);

阴影

box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);

自动换行、强制换行、强制不换行

1. 自动换行

word-wrap: break-word;
word-break: normal;

2. 强制换行

word-wrap: break-word;    按英文单词整体截断换行  /* 以上三个浏览器均支持 */
word-break: break-all;    按字符截断换行 /* 支持IE和chrome，FF不支持*/

• 注意：单词换行需要父盒子为块级元素

3. 强制不换行

white-space: nowrap;