jQuery「crop」div

Question

我希望我不會重複 - 它似乎沒有任何與我的規格相同的問題。

我正在尋找一種方法來「裁剪」與jQuery的div。 div將以零的寬度開始，然後將動畫變爲其全長。棘手的部分是我想讓任何溢出的文本被隱藏起來，而不是被推下來填滿空間。

它似乎不像常規的「overflow：hidden」可以工作，因爲我可以有很多行文本，並且我希望每行都被「裁剪」，所以單行的字符是隱藏的，而不是被撞到下一行。

我希望這很清楚。有什麼建議麼？

Answer 1

你需要使用嵌套的元素和CSS：

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

在CSS，你會希望將p元素的寬度設置爲全部金額，並設置溢出來包裝。然後，您會希望div元素具有隱藏的溢出併爲該元素的寬度設置動畫。

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

如果你不想在你的標記，你可以創建jQuery的包裝的div，並把它裏面的段落，當談到時間以動畫的額外股利。

小提琴：http://jsfiddle.net/XsLAT/

Answer 2

看看這個小提琴... http://jsfiddle.net/UnsungHero97/Zeg3z/4/

的#wrapper DIV將控制與overflow-x: hidden的裁剪;它不會顯示寬度以外的內容。 #text div將包含實際文本，並且如果您爲此容器指定寬度，那麼行將不會隨#wrapper div展開而改變。

我希望這會有所幫助。
Hristo

Answer 3

您可能在尋找具有nowrap選項的white-space CSS屬性。

實施例：http://jsfiddle.net/532H8/

調整寬度看或多或少的文字。