CSS中的省略号

CSS 中的省略号

1. 容器溢出设置的属性
   overflow:
   hidden——把溢出容器的部分隐藏
   visible——不隐藏，默认值
   scroll——不管容器是否溢出，都出现滚动条
   注意点：
   overflow 属性给父元素（容器）设置

2. 空白空间的设置
   white-space:
   normal——默认值，浏览器把多余的空白空间忽略，只显示一行
   pre——空白空间都会被浏览器保留，并且不换行
   pre-wrap——空白空间会被浏览器保留，而且会换行
   pre-line——空格符号会被忽略，但是换行符会被保留
   nowrap——不换行

3. 文本溢出设置的属性
   text-overflow:clip（简单裁剪）| ellipsis (出现省略符号）
   注意点：必须配合 overflow:hidden

单行文本出现省略号

p{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文本出现省略号

p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}