常用CSS ¶

强制换行 ¶

css

word-break: break-all; 只对英文起作用，以字母作为换行依据
word-wrap: break-word; 只对英文起作用，以单词作为换行依据
white-space: pre-wrap; 只对中文起作用，强制换行

word-break: break-all; 只对英文起作用，以字母作为换行依据
word-wrap: break-word; 只对英文起作用，以单词作为换行依据
white-space: pre-wrap; 只对中文起作用，强制换行

文字一行超出显示省略号 ¶

css

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

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

文字两行超出省略号 ¶

css

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

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

flex布局中设置宽度被压缩的问题 ¶

css

//当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩，解决方法: 给固定宽度的元素添加
flex-shrink:0

//当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩，解决方法: 给固定宽度的元素添加
flex-shrink:0

flex竖排 ¶

css

display: flex;
flex-flow: column;
flex-wrap: wrap;

display: flex;
flex-flow: column;
flex-wrap: wrap;

inset属性 ¶

提示

inset 属性用作定位元素的 top 、right 、bottom 、left 这些属性的简写。类似于 margin 和 padding 属性，依照“上右下左”的顺序。举个例子：

注意

inset 属性只作用于定位元素。Internet Explorer 浏览器上不支持该属性。

css

inset: 0; 
/* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */
inset: 1px 2px; 
/* 等同于 `top: 1px; right: 2px; bottom: 1px; left: 2px;` */
inset: 1px 2px 3px; 
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 2px;` */
inset: 1px 2px 3px 4px; 
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 4px;` */

inset: 0; 
/* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */
inset: 1px 2px; 
/* 等同于 `top: 1px; right: 2px; bottom: 1px; left: 2px;` */
inset: 1px 2px 3px; 
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 2px;` */
inset: 1px 2px 3px 4px; 
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 4px;` */