javascript - jQuery "crop"分区

Question

我希望我没有重复 - 似乎没有任何问题与我的规范相同。

我正在寻找一种使用 jQuery“裁剪”div 的方法。 div 将以零宽度开始，然后动画到它的全长。棘手的部分是我希望隐藏任何在侧面溢出的文本，而不是仅仅向下推以填充空间。

常规的“溢出:隐藏”似乎不起作用，因为我可以有很多行文本，并且我希望每一行都被“裁剪”，所以每一行的字符都被隐藏而不是被隐藏撞到下一行。

我希望这是清楚的。有什么建议吗？

Answer 1

您需要使用嵌套元素和 CSS:

<div id="content">
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
</div>

在 CSS 中，您需要将 p 元素的宽度设置为完整宽度，并将溢出设置为换行。然后，您将希望 div 元素 overflow hidden 并为该元素的宽度设置动画。

p { width: 300px; margin-top: 18px; }
#content { overflow: hidden; width: 50px; }

如果您不想在标记中使用额外的 div，您可以在 jQuery 中创建包装 div，并在需要设置动画时将段落放入其中。

fiddle :http://jsfiddle.net/XsLAT/