2011-03-14 135 views
3

您好我有列表(UL)和它的一些「禮」。添加字符的換行符

使用JavaScript(jQuery的),我怎樣檢測時換行,並添加開頭有一些字符。

因此,例如:

I have a very looooong text in 200px width li. 

結果是:

I have a very looooong text 
in 200px width li. 

我要添加 「+」 新行的開始=>結果:

I have a very looooong text 
+ in 200px width li. 

THX

+1

[檢測換行符使用jQuery?]的可能重複(HTTP://計算器。問題/ 4671713 /檢測線斷裂與jQuery) – 2011-03-14 20:02:25

+0

對不起,這是我的問題的答案。 – ajitam 2011-03-14 20:12:22

+0

不會發布這個作爲答案,因爲andyb的答案做這個工作好得多,但我在Aron鏈接到的副本上發佈了一個解決方案。 – 2011-09-16 09:04:37

回答

2

如何在純CSS的東西嗎? 演示 - http://jsfiddle.net/FDD7n/

在Chrome 11爲我工作,這可能取決於你的字體大小需要一些調整:)

+0

漂亮的一個,這樣一個簡單的解決一個棘手的問題 – rsplak 2011-03-14 21:53:22

+0

正是我一直在尋找脫穎而出!謝謝 – ajitam 2011-03-16 10:40:37

1

艱難的,這裏有一個n idea:讓我們創建一個與具有相同css屬性的li位於相同位置的額外div。給li一個15px的填充左邊。對於每一行,li高於1行,用+填充新的div。

var plusses = $('li').height()/$('li').css('line-height').slice(0,-2); //number of lines 
var i = 1; 
var sLines = '<br />'; // the first line doesn't need a + 
while(i < plusses) { 
    sLines+='+<br />'; // every other line does 
    i++; 
} 
$('#newdiv').html(sLines); 

然後你需要做的就是把這一堆東西給你!

0

如果瀏覽器決定將文本放置在單獨的行,因爲父母的寬度不夠,有可能是沒有辦法檢測。如果您自己在HTML中創建換行符,則可以查找「\ n」並將其替換爲「\ n +」。你可以,例如,計算文本寬度(Calculating text width),並檢查其對母公司的寬度,雖然它可能不是那麼容易猜測到的瀏覽器決定斷行。

0

我能想到的唯一方法是(假設瀏覽器會在白色空間中換行)將所有單詞放在一個範圍中,然後以編程方式循環遍歷y位置的兄弟。 如果y pos有重大變化,你可能會包裹......所以你添加「+」並繼續迭代。

記住,增加一個「+」可能會影響在該字符串的其餘部分將包裹以及並可能導致額外的換行符