在换行处添加字符

Question

你好，我有一个列表（ul），其中包含一些“li”。

使用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

- ajitam

---

可能是detecting line-breaks with jQuery?的重复问题。 - Aron Rotteveel

很抱歉，这只是我问题的一种答案。 - ajitam

我不会将此作为答案发布，因为andyb的回答已经更好地完成了这个目标，但我在Aron链接到的重复帖子上发布了一个解决方案。 - Nathan MacInnes

Answer 1

有点难，这里有一个想法：让我们创建一个额外的 div，它的位置与具有相同 CSS 属性的 li 相同。给 li 设置 15px 的左内边距。对于每行高度超过 1 行的 li，在新的 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);

然后你所需要做的就是对它们进行 CSS 样式设计！

- user657496

Answer 2

纯CSS怎么样？演示 - http://jsfiddle.net/FDD7n/

在Chrome 11中对我有效。这可能需要根据您的字体大小进行一些微调 :)

- andyb

---

不错，这是一个简单的解决方案，解决了一个困难的问题。 - user657496

Answer 3

如果浏览器决定将文本放在单独的一行，因为父元素的宽度不够，那么可能没有办法检测到。如果您自己在HTML中创建换行符，则可以查找“\n”并将其替换为“\n+”。例如，您可以计算文本宽度（计算文本宽度）并将其与父元素宽度进行比较，尽管猜测浏览器何时决定断开线可能不是那么容易。

- mattsven

Answer 4

我能想到的唯一方法是（假设浏览器将在空格处换行）将所有单词都包装在一个 span 中，然后通过编程循环遍历兄弟节点并跟踪 y 坐标。

如果 y 坐标有显着变化，则可能已经换行...因此，您需要添加“+”并继续迭代。

请记住，添加“+”也可能会影响字符串的其余部分将换行的位置，并导致额外的换行。

- Damp