02.div盒子显示具体行数多余的....显示

div盒子显示具体行数多余的…显示

具体行数的设置方法

// 标题 显示两行 多余隐藏
.item-title{
    // 超出隐藏
    overflow:hidden;
    // 多余的用...
    text-overflow:ellipsis;
    // 把盒子设置为弹性盒子
    display: -webkit-box;
    // 重上到下排列子元素
    -webkit-box-orient: vertical;
    // 具体显示行数
    -webkit-line-clamp:2;
}

效果图

只显示一行的设置方法

// 只显示一行 多以的...
.item-root{
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
}

效果图

这里需要注意的是如果父级盒子设置了flex布局的话就不起作用，那么解决的办法是啥呢，只需要在需要做文本溢出的盒子外面在套上一层盒子就可以完美的解决了！