Home  >  Q&A  >  body text

前端 - 如何实现指定多少行后内容未显示完就用省略号...代替?

1)已知文字父级元素p的高度,比如500px;
2)已知字体大小:font-size:28px;
如何算出需要显示多少行?
知道多少行后,如何实现指定这些行后内容未显示完就用省略号...代替?

ringa_leeringa_lee2766 days ago532

reply all(8)I'll reply

  • PHPz

    PHPz2017-04-17 11:34:50

    .xxx {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-height: 20px;
      max-height: 60px;
    }
    

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:34:50

    Limit the maximum number of displayed lines. If it exceeds the limit, use... instead of `!

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:34:50

    How many lines is how many lines... It is not difficult to control css with 1 line, but more is unclear

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:34:50

    Portal http://stackoverflow.com/questions/3922739/limit-text-length-to-n-line...

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:34:50

    There are not many lines, only the height. When the content exceeds the specified height, use js to truncate it~

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 11:34:50

    The number of rows cannot be controlled. Use height instead and estimate your number of rows.

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:34:50

    About the overflow of text content, use dots (…) ellipsis to indicate

    reply
    0
  • 迷茫

    迷茫2017-04-17 11:34:50

    Use jquery plug-in jquery.dotdotdot.js to solve

    reply
    0
  • Cancelreply