Question

我有一个应该发送到文本消息中的字符串，但是文本一直不在框内，我想将文本包装在div中。我想分割字符串，以便每隔17个字符左右插入一个
标记，以便将其移动到新标记。我需要将字符串沿空格分开，以使单词完整，但需要确保一行中的总字符不超过17。

还有其他我看不到的方法吗？也许在Jquery上的自动换行功能？

现在我执行以下代码：

 var newMessageArr = message.match(/.{1,15}/g);
var splitMessage = '<li class="replies"><p>' + newMessageArr[0];


    for (var i = 1; i < newMessageArr.length - 1; i++) {
        splitMessage += '<br>' + newMessageArr[i];
    }
    splitMessage += '</p></li>';

$(splitMessage).appendTo($('.messages ul'));

这会将消息放入数组，并在给定间隔插入br标签，唯一的问题是它会切断单词。

非常感谢您提供任何帮助，这是前端的新功能，因此，如果有明显的即时消息缺失，请放轻松...

Answer 1

我认为CSS word-break属性可以帮助您：https://www.w3schools.com/cssref/css3_pr_word-break.asp

运行以下示例，该示例取自w3school：

<!DOCTYPE html>
<html>
<head>
<style>
p {
    width: 140px; 
    border: 1px solid #000000;
}

p.a {
    word-break: normal;
}

p.b {
    word-break: keep-all;
}

p.c {
    word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>

<h2>word-break: normal (default):</h2>
<p class="a">Thisissomeveryveryverylong word. Words will break according to usual rules.</p>

<h2>word-break: keep-all:</h2>
<p class="b">Thisissomeveryveryverylong word. This text will-break-at-hyphens.</p>

<h2>word-break: break-all:</h2>
<p class="c">Thisissomeveryveryverylong word. This text will break at any character.</p>

</body>
</html>

Answer 2

或者您可以使用以下正则表达式：

var message='This is a really long message that needs to be broken into several lines of not more than 17 characters in length.';
console.log(message.match(/(.{1,16})(?:$| +)/g).join('\n'))

很显然，如果要将结果字符串附加到<div class="message"><ul>...结构中，则需要使用<br>将片段连接起来：

$('.messages ul').append('<li>'+message.match(/(.{1,16})(?:$| +)/g).join('<br>')+'</li>');

如何在Javascript和HTML中的空格上分割字符串？

2 个答案: