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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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