Question

我需要在文本溢出时添加换行符恩。如果文字是

wwwwwwwwwwwwwww

wwwwwwwwwwwwwww

在textarea

中

数据应该与换行符一致。目前显示的数据是

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww.

我需要显示在textarea中输入数据的确切方式。

当文本溢出时，它会移动到textarea中的下一行，但是当检索到数据时，不会保留换行符。它只显示为一行或者有什么方法我们可以知道溢出发生，以便可以添加新行？

Answer 1

我从下面的小提琴得到了答案，它将换行符应用于下一行 http://jsfiddle.net/pH79a/218/

HTML

<div>
<textarea rows="5" id="myTextarea" ></textarea>
</div>
<div id="pnlPreview"></div>
<div>
<button type="button" onclick="ApplyLineBreaks('myTextarea');">Apply Line Breaks</button>
</div>

的javascript

function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
    oTextarea.setAttribute("wrap", "off");
}
else {
    oTextarea.setAttribute("wrap", "off");
    var newArea = oTextarea.cloneNode(true);
    newArea.value = oTextarea.value;
    oTextarea.parentNode.replaceChild(newArea, oTextarea);
    oTextarea = newArea;
}

var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
var nLastWrappingIndex = -1;

function testBreak(strTest) {
    oTextarea.value = strTest;
    return oTextarea.scrollWidth > nEmptyWidth;
}
function findNextBreakLength(strSource, nLeft, nRight) {
    var nCurrent;
    if(typeof(nLeft) == 'undefined') {
        nLeft = 0;
        nRight = -1;
        nCurrent = 64;
    }
    else {
        if (nRight == -1)
            nCurrent = nLeft * 2;
        else if (nRight - nLeft <= 1)
            return Math.max(2, nRight);
        else
            nCurrent = nLeft + (nRight - nLeft) / 2;
    }
    var strTest = strSource.substr(0, nCurrent);
    var bLonger = testBreak(strTest);
    if(bLonger)
        nRight = nCurrent;
    else
    {
        if(nCurrent >= strSource.length)
            return null;
        nLeft = nCurrent;
    }
    return findNextBreakLength(strSource, nLeft, nRight);
}

var i = 0, j;
var strNewValue = "";
while (i < strRawValue.length) {
    var breakOffset = findNextBreakLength(strRawValue.substr(i));
    if (breakOffset === null) {
        strNewValue += strRawValue.substr(i);
        break;
    }
    nLastWrappingIndex = -1;
    var nLineLength = breakOffset - 1;
    for (j = nLineLength - 1; j >= 0; j--) {
        var curChar = strRawValue.charAt(i + j);
        if (curChar == ' ' || curChar == '-' || curChar == '+') {
            nLineLength = j + 1;
            break;
        }
    }
    strNewValue += strRawValue.substr(i, nLineLength) + "\n";
    i += nLineLength;
}
oTextarea.value = strNewValue;
oTextarea.setAttribute("wrap", "");
document.getElementById("pnlPreview").innerHTML = oTextarea.value.replace(new RegExp("\\n", "g"), "<br />");

}

Answer 2

word-wrap: break-word是你的朋友。试试这段代码。

textarea {
  word-wrap: break-word;
}

Answer 3

尝试cols

的textarea属性

<textarea rows="4" cols="40">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</textarea>

Answer 4

这样做

<input type="text" style="overflow-wrap: break-word;">

Answer 5

在PHP中，您通常使用nl2br()函数。请参考下面的问题，我相信它会对你有所帮助！

jQuery convert line breaks to br (nl2br equivalent)

Answer 6

使用自动换行的textarea参考下面的链接：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

Answer 7

这段简单的代码可以帮助您完成任务：

<textarea id="textbox" rows="10" cols="30"></textarea>

但你应该在网上搜索它，并且在stackoverflow本身有相同的上下文有很多问题。

你可以在这里尝试，但我认为不需要：

https://jsfiddle.net/thisisdg/8f3y5r4d/

我希望这会有所帮助。

textarea中的换行符

7 个答案: