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.

我想在新行的开头添加“+”=＆gt;结果：

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

THX

Answer 1

纯CSS中的某些东西怎么样？ 演示 - http://jsfiddle.net/FDD7n/

在Chrome 11中为我工作。根据您的字体大小，可能需要进行一些调整：）

Answer 2

艰难的一个，这是一个想法：让我们创建一个额外的div，它与具有相同css属性的li位于同一个位置。给li一个15px左边的填充。使用+'为每行填充新div，li高于1行。

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'ing the bunch！

Answer 3

如果浏览器决定将文本放在单独的行上，因为父级的宽度不够，则可能无法检测到它。如果您自己在HTML中创建换行符，则可以查找“\ n”并将其替换为“\ n +”。例如，您可以计算文本宽度（Calculating text width）并根据父宽度进行检查，尽管可能不太容易猜测浏览器决定在哪一行中断。

Answer 4

我能想到的唯一方法是（假设浏览器将在白色空间上换行）将所有单词包裹在一个范围内，然后以编程方式循环遍历兄弟，跟踪y pos。如果y pos发生了重大变化，你可能已经包装了...所以你添加“+”并继续迭代。

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

在换行符上添加字符

4 个答案: