单行截断

  1. div {
  2.   white-space: nowrap;
  3.   overflow: hidden;
  4.   text-overflow: ellipsis;
  5. }

多行省略

  1. div {
  2.   display: -webkit-box;
  3.   overflow: hidden;
  4.   -webkit-line-clamp: 2;
  5.   -webkit-box-orient: vertical;
  6. }

:after+absolute+gradient操作

来源链接：https://juejin.im/post/5c8864e9e51d4562de4677d1

  1. p {
  2.     position: relative;
  3.     line-height: 18px;
  4.     height: 36px;
  5.     overflow: hidden;
  6. }
  7. p::after {
  8.     content:"...";
  9.     font-weight:bold;
  10.     position:absolute;
  11.     bottom:0;
  12.     right:0;
  13.     padding:0 20px 1px 45px;
  15.     /* 为了展示效果更好 */
  16.     background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  17.     background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  18.     background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  19.     background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  20.     background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  21. }

:after+float+gradient

来源链接：https://juejin.im/post/5c8864e9e51d4562de4677d1

  1. <div class="wrap">
  2.   <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
  3. </div>
  1. .wrap {
  2.     height: 40px;
  3.     line-height: 20px;
  4.     overflow: hidden;
  5. }
  7. .wrap .text {
  8.     float: right;
  9.     margin-left: -5px;
  10.     width: 100%;
  11.     word-break: break-all;
  12. }
  14. .wrap::before {
  15.     float: left;
  16.     width: 5px;
  17.     content: '';
  18.     height: 40px;
  19. }
  21. .wrap::after {
  22.     float: right;
  23.     text-align: right;
  24.     content: "...";
  25.     height: 20px;
  26.     line-height: 20px;
  27.     /* 为三个省略号的宽度 */
  28.     width: 3em;
  29.     /* 使盒子不占位置 */
  30.     margin-left: -3em;
  31.     /* 移动省略号位置 */
  32.     position: relative;
  33.     left: 100%;
  34.     top: -20px;
  35.     padding-right: 5px;
  36.     /* 显示更好的效果 */
  37.     background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  38.     background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  39.     background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  40.     background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  41.     background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  42. }