CSS 单行|多行文字变点状方法

一行文字变点状

文字超出的部分变点状

			//强制文字不换行
			white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

多行文字变点状

• 方法一：（兼容性不好）

			display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:4;
            //设置几行文字变点状（w3c没有收录这个属性）
            overflow: hidden;

• 方法二：

.box {
			line-height: 20px;
            height: 60px;
            overflow: hidden;
            position: relative; 
       }
            

.box:after{
            content: '......';
            position: absolute;
            right: 5px;
            bottom: 0;
            background: #fff;
            padding-left: 7px;
        }