css 中英文换行、超出显示省略号

一、url/数字 长单词换行

1、word-wrap

属性	值
break-word	文字有可以换行的点，如空格之类的，就不打英文单词或字符的主意了，很容易出现一片一片空白区域的情况

2、word-break

属性	值
break-all	所有的都换行

二、超出显示省略号

一行显示省略号
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

超过n行时再显示省略号
1.  -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3.  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

三、字体间距

word-spacing: 2px;

四、首行缩进

text-indent: 2em;