CSS doesn’t break line when Javascript updates <p> tag

Question

I'm doing a "live preview" of the post you can post on my website and when you type in the content section the preview doesn't break the line, it just goes on and on. Live version you can test: https://sponge.rip/post

<script type="text/javascript">
    function update_preview() {
        document.getElementById('preview_title').innerHTML = document.getElementById('title').value;
    }

    function update_content() {
        document.getElementById("preview_content").innerHTML = document.getElementsByTagName("textarea")[0].value;
    }

    function preview() {
        if (document.getElementById("preview").checked == true) {
            var row = document.querySelectorAll('#row');
        } else {

        }
    }
</script>

<div class="col-md-6">
    <div class="post-holder">
        <div class="post-item">
            <div class="post-header">
                <div class="title">
                    <h2 id="preview_title">title</h2>
                    <span class="author"><a href="/Tobias">Tobias</a></span>
                    <?php
                        $date = date("y-m-d");
                        echo "<time>$date</time>";
                    ?>
                </div>
            </div>
            <div class="post-body">
                <p id="preview_content">content</p>
            </div>
        </div>
    </div>
</div>
.main {
    margin-top: 20px;
    padding-bottom: 90px;
}

.post-holder {
    margin-bottom: 15px;
}

.post-item {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 12px 12px 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}

.post-item .post-header {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: 1px solid rgba(160, 160, 160, 0.15);
}

.post-item .post-header span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin-left: 2px;
}

.post-item .post-header .title {
    width: 90%;
    padding-top: 2px;

}

.post-item .post-header .title h2 {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 0;
    line-height: 1;
}

.post-item .post-header .title .author a {
    color: rgba(38, 38, 38, 0.75);
}

.post-body {
    position: relative;
}

.post-body p {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

The result should look like the home page: https://sponge.rip/ You can see some posts there were the text doesn't overflow the div

Answer 1

You need a rich text editor to add line breaks. A basic textarea doesn't add html tags. Check out something like tinymce or summernote or any of the other hundreds of text editors available on the internet

Answer 2

You should use <pre> instead of <p> if you want newline characters to work as expected.

<p> = paragraph <pre> = preformatted

Answer 3

You could always convert line breaks to an html <br /> . Something like this:

document.getElementById("preview_content").innerHTML = document.getElementsByTagName("textarea")[0].value.replace(/\r?\n/g, '<br />');

Answer 4

Word break works fine. You can try it.

<p style="word-break: break-all;"></p>

https://jsfiddle.net/dm6u4qra/