javascript 在新行中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16141095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
wrapping text words in new line
提问by tina
I'm using the below code for wrapping long text, entered by users in a text area for commenting:
我正在使用以下代码来包装长文本，用户在文本区域中输入以进行评论：
function addNewlines(comments) {
var result = '';
while ($.trim(comments).length > 0) {
result += comments.substring(0,70) + '\n';
comments = comments.substring(70);
}
return result;
}
The problem is shown in the below screen shot. Any ideas on how to solve it? Can we use lastindexof(" ")method to get the last space in a substring to solve this issue logically? Can anyone tweak this little code to make it right?
问题显示在下面的屏幕截图中。关于如何解决它的任何想法？我们可以使用lastindexof(" ")方法获取子字符串中的最后一个空格来逻辑解决这个问题吗？任何人都可以调整这个小代码以使其正确吗？
采纳答案by Morteza Adi
I believe wrapping a text by CSS is a better solution however there is a link here which may be helpful wrap-text-in-javascript
我相信用 CSS 包裹文本是一个更好的解决方案，但是这里有一个链接可能会有帮助wrap-text-in-javascript
by the way i remember there is a JQuery plugin for wrapping text google it too.
顺便说一句，我记得有一个 JQuery 插件，用于包装文本谷歌它太。
回答by PSR
Try one of these:
尝试其中之一：
word-wrap:no-wrap;word-wrap: break-word
word-wrap:no-wrap;word-wrap: break-word
It might solve your problem
它可能会解决您的问题
回答by Artyom Neustroev
Try word-wrap: break-wordin CSS.
The word-wrapproperty is well supported by browsers (even IE 5.5+).
More info here: https://developer.mozilla.org/en-US/docs/CSS/word-wrap
Sample usage: FIDDLE
word-wrap: break-word在 CSS 中尝试。
该word-wrap属性受到浏览器（甚至 IE 5.5+）的良好支持。
更多信息在这里：https: //developer.mozilla.org/en-US/docs/CSS/word-wrap
示例用法：FIDDLE
回答by vbguyny
The ones above only work 99% of the time. This is the only one that works for me 100%: http://locutus.io/php/strings/wordwrap/
上面的那些只在 99% 的时间里工作。这是唯一一个 100% 对我有用的：http: //locutus.io/php/strings/wordwrap/
回答by xxx
I use this css code for displaying in Torch browser and it works
我使用此 css 代码在 Torch 浏览器中显示并且它有效
I've tried word-wrap:break-word;overflow:ellipsis;....etc, but didn't work.
我试过word-wrap:break-word;overflow:ellipsis;......等，但没有奏效。
#xxx{
width: 750px;
word-break: break-word;
}
回答by fpauer
After looking for the perfect solution using regex and other implementations. I decided to right my own. It is not perfect however worked nice for my case, maybe it does not work properly when you have all your text in Upper case.
在使用正则表达式和其他实现寻找完美的解决方案之后。我决定纠正我自己的。它并不完美，但对我的情况来说效果很好，也许当你的所有文本都为大写时，它可能无法正常工作。
function breakTextNicely(text, limit, breakpoints) {
var parts = text.split(' ');
var lines = [];
text = parts[0];
parts.shift();
while (parts.length > 0) {
var newText = `${text} ${parts[0]}`;
if (newText.length > limit) {
lines.push(`${text}\n`);
breakpoints--;
if (breakpoints === 0) {
lines.push(parts.join(' '));
break;
} else {
text = parts[0];
}
} else {
text = newText;
}
parts.shift();
}
if (lines.length === 0) {
return text;
} else {
return lines.join('');
}
}
var mytext = 'this is my long text that you can break into multiple line sizes';
console.log( breakTextNicely(mytext, 20, 3) );回答by Roy
I had the same issue, I solved it using the below function.
我遇到了同样的问题，我使用以下函数解决了它。
function wordWrap(message, lineSize, breakPoint){
let wordsArr = message.split(" "),
wordsLen = wordsArr.length,
finalMsg = "",
linesArr = [""],
currLine = 0;
for(let i=0; i< wordsLen; i++){
if(linesArr[currLine].length + wordsArr[i].length > lineSize){
currLine +=1;
linesArr[currLine] = wordsArr[i] + " ";
} else {
linesArr[currLine] += wordsArr[i] + " ";
}
}
let linesLen = linesArr.length;
for(let i=0; i<linesLen; i++){
finalMsg += linesArr[i] + breakPoint;
}
return finalMsg.trim();
}
Hope this helps.
希望这可以帮助。
回答by Mahesh Patidar
Hi just apply some css on text area like
嗨，只需在文本区域应用一些 css，例如
style="word-wrap: break-word;"
