.view_top_content { display: flex; flex-direction: row; justify-content: space-between; .msg_title { font-size: 16px; font-weight: bolder; color: #333333; /// 溢出部分隐藏 overflow: hidden; /// 文本移除后 使用...替换 text-overflow: ellipsis; /*值为数字,表示一共显示几行*/ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ max-height: 50px; /* 设置或检索伸缩盒对象的子元素的排列方式 */ display: -webkit-box; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; text-align: left; } } .time { .msg_date { font-size: 11px; color: #999999; width: 100px; } } .content { width: 100%; text-align: left; /// 不允许换行 // white-space: nowrap; /// 溢出部分隐藏 overflow: hidden; /// 文本移除后 使用...替换 text-overflow: ellipsis; -webkit-line-clamp: 3; /* 设置或检索伸缩盒对象的子元素的排列方式 */ max-height: 50px; /* 设置或检索伸缩盒对象的子元素的排列方式 */ display: -webkit-box; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; font-size: 14px; color: #333; margin: 5px 0px; } .loding { position: absolute; padding-top: 75%; padding-left: 45%; }