javascript - 当 Javascript 更新 标签时，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;

}

.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;
}

结果应该类似于主页:https://sponge.rip/你可以看到一些帖子那里的文字没有溢出 div

Answer 1

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