css常用用法合集

文字超出显示省略号

/*设置文字不换行，超过的部分用“...”代替*/
.box-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

1.white-space

① normal 默认，空白会被浏览器忽略
② pre 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签
③ nowrap 文本不会换行，文本会在同一行上继续，直到遇到
标签（开始换行）为止
④ pre-wrap 保留空白符序列，但是正常地进行换行
⑤ pre-line 合并空白符序列，但是保留换行符
⑥ inherit 规定应该从父元素继承white-space 属性的值

2 word-break

① normal 使用浏览器默认的换行规则
② break-all 允许在单词内换行
③ keep-all 只能在半角空格或连字符处换行

3 text-overflow

① clip ： 修剪文本
② ellipsis : 显示省略符号来代表被修剪的文本
③ string : 使用给定的字符串来代表被修剪的文本

文字超出两行隐藏并显示省略号

以上的写法只能保证超出一行时省略
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

居中

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);