文字溢出 生成 省略号

单行文字变省略号：

.box{
　　/* 1.固定宽度 */
　　width: 100px;
　　/* 2.空白处理：不折行 */
　　white-space: nowrap;
//<p> 中用: white-space:nowrap;
　　/* 3.溢出隐藏 */
　　overflow: hidden;
　　/* 4.文本超出：省略号 */
　　text-overflow: ellipsis
　　}

 

多行文字变省略号：

.right_content a {
    /* 多行文字+省略号 */
    width: 10rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 行数 */
    -webkit-line-clamp: 2;
    overflow: hidden;

    /* 鼠标移上变手 */
    cursor: pointer;
}

 

转载于:https://www.cnblogs.com/MrZhujl/p/10315897.html