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

您需要一个RTF编辑器来添加换行符。基本的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/

JavaScript更新<p>标记时，CSS不会换行

3 个答案: