2011-03-14 177 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有重大变化,你可能会包裹......所以你添加“+”并继续迭代。

记住,增加一个“+”可能会影响在该字符串的其余部分将包裹以及并可能导致额外的换行符