当 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 <br />。像这样的东西：

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

Answer 3

断字工作正常。你可以试试看。

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

https://jsfiddle.net/dm6u4qra/