How can I set the text layout

Question

I have a project and in this project I can add text, no problem so far. I want to write one under the other(Pic1) but it writes side by side (Pic2). How can I do that?

Maybe pictures can't open, I want to explain what I want with an example:

I want this:

lorem ipsum test text


lorem2 ipsum2 test2 text2

Output this (All text in the same line):

lorem ipsum test tetx lorem2 ipsum test2 text2

This is my input textbox

    <div class="row">
        <div class="col-md-12">
            <div class="Comment input-group">
                <input type="text" class="form-control" id="new_comment_text" placeholder="Yorum" aria-describedby="basic-addon2"/>             
                <div class="input-group-append" >
                    <button class="comment btn btn-success btn-sm" type="button" onclick="doComment(this,'new_comment_clicked',-1,-1);"><span class="fas fa-paper-plane"></span> Ekle </button>
                </div>
            </div>
        </div>
    </div>

This is my output area

@helper collapsePopUp(string id = "",int noteId=0 , string title = "Modal Title", bool showCloseButton = true)
{
    <div class="commentWrap noCommentBox" data-note-id=@noteId id="@id" name="@id" aria-labelledby="@(id+"_labelPopup")">
        <ul id="@(id+"_bodyPopup")">

        </ul>
    </div>
}

Answer 1

You will need to convert \n chars of <textarea> to <br/> tags.

something like

output.innerHTML = str.replace(/\n/g,"<br />");

Answer 2

Slightly confused with the question, but if using HTML the

<br>

should work! Or, if using css, look into positioning for better coding practices. Sorry if this doesn't answer your question, if you update with more information I'd be happy to further help

Answer 3

You should add the symbol p to create a new paragraph inside of two phrase.

lorem ipsum test tetx lorem2 ipsum <p> test2 text2

Or you can add \n symbol for bigger blank inside phrases

lorem ipsum test tetx lorem2 ipsum <\n> test2 text2

Answer 4

I solved the problem thank you. I added ;

white-space: pre-line

to the .CSS file. I was able to get the image I wanted.