Linebreak in textarea

Question

I need to add line break when the text overflows ex. if the text is

wwwwwwwwwwwwwww

wwwwwwwwwwwwwww

which is with in the textarea

the data should be with the line break. Currently the data it is displaying is

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww.

I need to show the exact way how the data is entered in textarea.

When the text overflows it moves to next line in the textarea,but when the data is retrieved the line break is not retained. It just displays as a single line Or is there any way we can know that overflow occurs so that new line can be added?

Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. In this case click the `<>` and show the textarea and how you want to display the content. HTML will ignore line breaks not converted to `
` — mplungjan, May 24 '18 at 06:07
Something like: https://stackoverflow.com/questions/1819748/how-to-word-wrap-in-normal-html-textbox ? — Beri, May 24 '18 at 06:07
Its not the word wrap.. I want the visual line break to retain as it is.. the output should be with the line break — user3510028, May 24 '18 at 06:34

score 1 · Accepted Answer · answered May 25 '18 at 07:30

I got the answer from the below fiddle which applies the line break to each next line 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 />");

}

score 0 · Answer 2 · answered May 24 '18 at 06:07

0

word-wrap: break-word is your friend. Try this code.

textarea {
  word-wrap: break-word;
}

answered May 24 '18 at 06:07

Aryan Twanju

2,464
1
9
12

this doesn't work.. the data still comes in a single line – user3510028 May 24 '18 at 07:18

score 0 · Answer 3 · answered May 24 '18 at 06:08

0

Try cols attribute of the textarea

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

answered May 24 '18 at 06:08

Hrishikesh

632
3
13

I need the visual value to be retained with the line break – user3510028 May 24 '18 at 06:33
what do you mean by a visual line break ? – Hrishikesh May 24 '18 at 06:38
I mean when the text overflows the text moves to next line but while retrieveing the value the linebreak is not retained. How to retain that line break – user3510028 May 24 '18 at 06:41
how is your textarea data getting saved in db table. with linebreaks or just the text alone. – Hrishikesh May 24 '18 at 06:47
without line break it is saving .. i need with line break – user3510028 May 24 '18 at 06:49
@user3510028! which is the datatype of the field in table? – Hrishikesh May 24 '18 at 06:51
its varchar in the database – user3510028 May 24 '18 at 06:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171670/discussion-between-hrishikesh-and-user3510028). – Hrishikesh May 24 '18 at 06:59

score 0 · Answer 4 · answered May 24 '18 at 06:08

0

Do this

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

answered May 24 '18 at 06:08

rkg

805
5
14

score 0 · Answer 5 · answered May 24 '18 at 06:08

0

In PHP u usually use nl2br() function. Please refer to the below question, I am sure that it will help you!

jQuery convert line breaks to br (nl2br equivalent)

answered May 24 '18 at 06:08

Mario Rawady

871
7
17

when the data in textbox overflows the text comes down and it is shown as a two line. but while retrieving the text the data is coming as one line – user3510028 May 24 '18 at 07:09
Are using `PHP` or `javascript` to retrieve the value ? – Mario Rawady May 24 '18 at 09:11
I am using javascript – user3510028 May 24 '18 at 09:28

score 0 · Answer 6 · answered May 24 '18 at 06:12

0

Use word-wrap for textarea reference to below link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

answered May 24 '18 at 06:12

user9595480

57
11

score 0 · Answer 7 · answered May 24 '18 at 08:09

0

This simple line of code can help you with the task:

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

But you should search it on web and there are many questions with the same context on the stackoverflow itself.

You can try it here but I think it is not needed:

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

I hope this helps.

answered May 24 '18 at 08:09

Code_Ninja

1,729
1
14
38

no it doesn't work the way I want. On retrieval of data also i should retain the line break not only on display. – user3510028 May 24 '18 at 08:38
then its not that the code will automatically append `
` at every line break, for that you have to press enter give `
` manually while writing something in the `textarea`. – Code_Ninja May 24 '18 at 08:49
and if you need help on saving special characters, then take reference from this link: [Populating the textarea with special charcters](https://stackoverflow.com/questions/4037263/populating-a-textarea-with-special-characters) – Code_Ninja May 24 '18 at 08:51

Linebreak in textarea

7 Answers7