文本缩略问题

• 有的要求是单行文本末尾有省略符号
• 有的要求是多行文本有省略符号
• 有的要求是单行文本中间有省略符号
• 有的要求是多行文本可展开伸缩的末尾省略符号
• 下面代码在react下可直接使用(class -> className)

单行省略末尾

• css

  {
        
        /* 单行省略末尾 css */}
  <p className="uniline-end-wrapper">
    君不见黄河之水天上来，奔流到海不复回
  </p>
  

  /* 单行省略末尾 */
  .uniline-end-wrapper {
        
        
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  

多行省略末尾

• css

  {
        
        /* 多行省略末尾 css */}
  <p className="textarea-end-wrapper">
    君不见高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月
  </p>
  

  /* 多行省略末尾
    -webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
    display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  */
  .textarea-end-wrapper {
        
        
    width: 120px;
    /* 自动隐藏文字 */
    overflow: hidden;
    /* 文字隐藏后添加省略号 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 控制行数 */
    -webkit-line-clamp: 2;
  }
  

单行省略中间

• css

  {
        
        /* 单行省略中间 css */}
  <p className="uniline-middle-wrapper">
   <span className="left">天生我材必有用，千金散尽还</span>
   <span className="right">复来.png</span>
  </p>
  

  /* 单行省略中间 */
  .uniline-middle-wrapper {
        
        
    display: flex;
    max-width: 180px;
    overflow: hidden;
  }
  
  .uniline-middle-wrapper .left {
        
        
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  
  .uniline-middle-wrapper .right {
        
        
    white-space: nowrap;
  }
  

可展开伸缩的省略末尾

• js
  • 文本内容截断处理-LinesEllipsis
  • 控制maxLine即可

  import LinesEllipsis from "react-lines-ellipsis";
  
  {
        
        /* 多行省略 兼容性好 参数控制 */}
  <p className="textarea-end-wrapper">
    <LinesEllipsis
      text="烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。
    与君歌一曲，请君为我倾耳听。"
      maxLine="3"
      ellipsis="..."
      trimRight
      basedOn="letters"
    />
  </p>
  ``