While循環獲取元素寬度

我試圖打破一個文本塊到單獨的行。每行需要儘可能多的單詞，而不是增長到大於容器的寬度。While循環獲取元素寬度

使用jQuery我創建了這樣做的功能，但我有它的問題。

內部while循環我通過我的文字塊和我搶6個字穿上線。我想比較該文本的寬度和該容器的寬度。但是，我嘗試的所有內容都是從while循環中突出顯示的。

$('element').width();

和原始JS width屬性：

$('element').get(0).offsetWidth;

似乎都沒有工作，但我不知道爲什麼

我使用jQuery的方法來獲得寬度試過嗎？誰能幫忙？

這裏是一個的jsfiddle折斷被註釋掉的鏈接。

http://jsfiddle.net/CZH2p/

提前感謝！

來源

2013-02-16 Jeffpowrs

對不起，但你爲什麼要這麼做？你可以通過正確設計容器來實現這種行爲，而不會污染你的文本
標籤 – Roy 2013-02-16 22:19:18

這是創建一個非常具體的程式化頭，只能這樣做。它使用動態文本，因此在事實之前無法分解它。你也看過代碼嗎？沒有添加br標籤。每行文本都需要有背景顏色和填充。使用內聯塊或塊進行不破碎文本會創建一個實體塊，並在文本內部打破文本。使用內聯顯示你不能添加填充。 – Jeffpowrs 2013-02-16 22:24:42

不過，爲什麼這是唯一的方法？修正標題寬度有什麼問題？（我想嘗試和儘快幫助你，因爲我確信這是一個好主意:)） – Roy 2013-02-16 22:31:41

的CSS解決問題：

2版

#a{ 
width: 400px; 
height: 120px; 
font-family: sans-serif; 
text-transform: uppercase; 
color:#fff; 
background: #222; 
padding: 200px 5px 0 5px; 
} 
#a>span{ 
display: block; 
float:left; 
font-size: 20px; 
background: rgba(255,111,111,0.7); 
padding: 10px; 
margin: 5px 0; 
}

包裹在一個span標籤

<div id="a"> 
    <span>word</span> 
    <span>word</span> 
    <span>word</span> 
    <span>word</span> 
    <span>word</span> 
    <span>word</span> 
    <span>word</span> 
</div>

每個單詞可能有一點JS

來完成

最簡單的代碼，給你的想法：

'<span>'+text.split(' ').join('</span><span>')+'</span>'

1版

它在換行符缺少填充，但接近你想要的東西：

#a{ 
width: 400px; 
height: 400px; 
background: #222; 
} 

#a>h1 { 
font-family: sans-serif; 
display: inline; 
font-size: 20px; 
line-height: 50px; /*this does the trick*/ 
text-transform: uppercase; 
color:#fff; 
background: rgba(255,111,111,0.7); 
padding: 10px; 
}

和HTML：

<div id="a"> 
    <h1>Lol'em ipsum doll or e-man and again lol'em ipsum doll or e-man</h1> 
</div>

來源

2013-02-16 23:34:43 naugtur

是的，我最初嘗試過這條路線，但我無法解決的問題是在換行處獲得填充。有任何想法嗎？ – Jeffpowrs 2013-02-16 23:39:36

這應該這樣做 – naugtur 2013-02-16 23:44:59

如果您希望使單詞之間的間距與外層線條的寬度相同，請在浮動元素上使用負左邊距，並在背景中使用透明度。改變整個包裝節點的不透明度。 – naugtur 2013-02-16 23:58:09

我認爲你需要重新審視的對象在JavaScript中是如何工作的，這也是有效的更適合於一個功能而不是一個普通的對象。

仍不能確定的，你正試圖在這裏達到什麼樣的目的。但這是我可以幫助你的。

1. 您正在引用當前對象的屬性，而無需引用的對象，這意味着你有未知屬性無處不在。

$parent = $featured_el.closest('.img-wrap'); 
parent_width = $parent.width();

這些創建新事物，不設置您已經定義的屬性。

2. 您有一個空嘗試catch，這意味着您在調試控制檯中沒有錯誤。我想這就是爲什麼你覺得width（）會讓你脫離循環。這不是，這是一個被捕獲和壓制的例外。

} catch(err) {}

3. $ lastLine所和last_width永遠不會設置爲任何其他比「0」，這意味着你的console.log始終顯示爲0和你的$ lastLine.text（）調用是一個錯誤。

4. 我猜想了$ lastLine是爲了設置，並解決了上述基本問題。這是現在達到你想要的？ http://jsfiddle.net/rakkeh/CZH2p/2/

來源

2013-02-17 01:41:10

While循環獲取元素寬度

回答

相關問題