Question

嘿大家，我一直在寻找这个解决方案，但只找到了限制字符的解决方案。我有以下代码：

<div id = "ta_0" style="display: none;">
   <a href = "news.html">IRS announces 2011 COLA limits for qualified retirement plans</a>
   <br />Most retirement plan contribution and benefit limits for 2011 will
be unchanged from 2010, the IRS has announced. The 2011 cost of
living adjustments (COLAs), as applied by their Internal Revenue
C...</div>

我想将锚文本后的文本后面的字符数限制为两行。我知道我可以限制字符限制，但这可能会减少一半的字数。相反，我只是想让他们停下来。我还想在限制结束时追加“......”。

有什么建议吗？

Answer 1

“两条线”几乎是不可能的。这需要两件事：

Thumbscrews CSS控制宽度和字体大小的各个方面 - 即使使用它，您仍然无法控制渲染到100％。这是困难的部分。
了解宽文本的呈现方式。不同数量的字符可以分为两行。这是不可能的部分。

您可以做的是将描述性文本包装在块级元素（即<div>）中，并通过CSS将其设置为两行：

div.description {
  line-height: 1.2em;
  height: 1.4em;  /* max-height would be nicer but is not supported everywhere */
  overflow: hidden;
}

IE支持方便的text-overflow: ellipsis;属性，当文本溢出时，它为您提供了很好的自动省略号…，而其他浏览器则没有。

Answer 2

为了做到这一点，你需要计算每一行的文字宽度，特别是如果你使用比例宽度字体。

我建议您查看这个问题：Calculate text width with JavaScript

这些问题涉及如何执行文本度量操作的问题。我会在构造中使用它，一次向一个句子添加一个单词，当超过限制时，开始一个新行并在达到足够的行时停止。

jquery限制段落中的行并将三个句点应用到结尾

2 个答案: