Javascript 更新時 CSS 不會斷線<p>標簽</p>

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或互聯網上其他數百種文本編輯器中的任何一種

Answer 2

如果您希望換行符按預期工作，則應使用<pre>而不是<p> 。

<p> = 段落<pre> = 預格式化

Answer 3

您始終可以將換行符轉換為 html <br /> 。 像這樣的東西：

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

Answer 4

分詞工作正常。 你可以試試。

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

https://jsfiddle.net/dm6u4qra/