Question

我在前端有问题。用户注释字符串的地方。

“WAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA”

没有空间。这个问题导致我的网页超出了布局中的文字，或者在移动浏览器中更糟糕。所以我想是否有办法插入“\ n”或＆lt; br＆gt;当string.lenght＆gt; my.lenght。当真的打破一条线？

Answer 1

您可以更轻松地使用CSS解决此问题。

word-break属性允许您为特别长的单词定义显示行为。

单击运行代码段以查看结果

p {
  background-color: #f0f0f0;
  padding: 10px;
  width: 200px;
}

p.notbroken {
  word-break: break-all;
}

<!-- broken -->
<p>
watch out for the really long word WAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA ok it's over
</p>

<!-- fixed -->
<p class="notbroken">
watch out for the really long word WAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA ok it's over
</p>

Answer 2

我想快速解决方案是使用正则表达式：

//javascript
"12345678".split(/(.{2})/).slice(1, -1).join("<BR>");
//output = 12<BR><BR>34<BR><BR>56<BR><BR>78

这里有{2}每次跳跃之间的角色数。

Answer 3

为您提供的JavaScript解决方案。

小提琴：http://jsfiddle.net/b7grep1v/1/

var myDiv = document.getElementById('test');
var myString = "WAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1";

if (myString.length > 10) {
    var index = 0,
        length = myString.length,
        chunk = 10;
    for (; index < length; index += chunk) {
        myDiv.textContent += myString.slice(index, index + chunk) + "\n";
    }
}

自动换行特定长度的字符串

3 个答案: