index.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. .view_top_content {
  2. display: flex;
  3. flex-direction: row;
  4. justify-content: space-between;
  5. .msg_title {
  6. font-size: 16px;
  7. font-weight: bolder;
  8. color: #333333;
  9. /// 溢出部分隐藏
  10. overflow: hidden;
  11. /// 文本移除后 使用...替换
  12. text-overflow: ellipsis;
  13. /*值为数字,表示一共显示几行*/
  14. -webkit-line-clamp: 2;
  15. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  16. max-height: 50px;
  17. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  18. display: -webkit-box;
  19. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  20. -webkit-box-orient: vertical;
  21. text-align: left;
  22. }
  23. }
  24. .time {
  25. .msg_date {
  26. font-size: 11px;
  27. color: #999999;
  28. width: 100px;
  29. }
  30. }
  31. .content {
  32. width: 100%;
  33. text-align: left;
  34. /// 不允许换行
  35. // white-space: nowrap;
  36. /// 溢出部分隐藏
  37. overflow: hidden;
  38. /// 文本移除后 使用...替换
  39. text-overflow: ellipsis;
  40. -webkit-line-clamp: 3;
  41. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  42. max-height: 50px;
  43. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  44. display: -webkit-box;
  45. /* 设置或检索伸缩盒对象的子元素的排列方式 */
  46. -webkit-box-orient: vertical;
  47. font-size: 14px;
  48. color: #333;
  49. margin: 5px 0px;
  50. }
  51. .loding {
  52. position: absolute;
  53. padding-top: 75%;
  54. padding-left: 45%;
  55. }