查找文本占用的行数

Lea*_*zhi 1 javascript css php

我有一个产品清单,其中写有产品的标题.我想要做的是检查产品标题是否超过2行,在这种情况下,打印刚好足以适合2行,并在最后添加"...".

有任何想法吗?

ins*_*ere 5

可能出现的一个问题是,即使在不同版本中以及在不同操作系统上,字体呈现也可能在浏览器与浏览器之间不同.因此,当涉及某种预先计算文本长度/高度时,这并不容易.你可以这样做:

  • 创建一个具有最大高度的字段
  • 将此字段的溢出设置为隐藏
  • 写一个执行以下操作的JavaScript:

__

  • 1得到文字
  • 2切掉最后一个字(使用正则表达式或类似的东西)
  • 3检查容器是否仍有溢出
  • 4执行步骤2和3,直到没有溢出
  • 5再切断一个字(你仍然可能有这种情况,你没有"......"的空间)
  • 6附加"......"

这个只有你有一个纯文本才有效.如果您在标题中包含标签,那么这样的事情可能会完全破坏您的HTML结构.想象一下,这会产生一个开放的"<span>" - 永远不会被关闭的标签...... :)

您的正则表达式/单词查找器也应该如此聪明,以便删除"单词分隔"之类的内容.

我不知道这是否是一个非常好的方法,但也许有点帮助,因为使用jQuery这只会像4-5行.