当 Javascript 更新 <p> 标签时，CSS 不会断线

Question

我正在对您可以在我的网站上发布的帖子进行“实时预览”，当您在内容部分中输入内容时，预览不会中断，它只会继续下去。您可以测试的实时版本：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;

}

结果应该看起来像主页：https : //sponge.rip/ 你可以看到一些帖子，文本没有溢出 div

Answer 1

您需要一个富文本编辑器来添加换行符。基本的 textarea 不添加 html 标签。查看类似tinymce或summernote或互联网上可用的其他数百种文本编辑器中的任何一种

Answer 2

您始终可以将换行符转换为 html&nbsp;<br />。像这样的东西：document.getElementById("preview_content").innerHTML&nbsp;=&nbsp;document.getElementsByTagName("textarea")[0].value.replace(/\r?\n/g,&nbsp;'<br&nbsp;/>');

Answer 3

断字工作正常。你可以试试看。<p&nbsp;style="word-break:&nbsp;break-all;"></p>https://jsfiddle.net/dm6u4qra/