在 javascript ( alpine ) 中保留換行符

Question

我正在使用一個功能，如果它有超過 200 個字符並添加一個...閱讀更多按鈕，並且當單擊該按鈕時會顯示整個文本。

問題是文本顯示時沒有換行符，並且從數據庫中格式化，即使變量是從PHP和 nl2br 傳遞的。

編碼

<p
    x-data="{ isCollapsed: false, maxLength: 200, originalContent: '', content: '' }"
    x-init="originalContent = $el.firstElementChild.textContent.trim(); content = originalContent.slice(0, maxLength)"
    >
        <span x-text="isCollapsed ? originalContent : content">{!! nl2br(e($content->socialCreate->text)) !!}</span>
        <button
            class="font-extrabold"
            @click="isCollapsed = !isCollapsed"
            x-show="originalContent.length > maxLength"
            x-text="isCollapsed ? 'Esconder' : '...Leer mas'"
        ></button>
</p>

如何使文本顯示帶有換行符？

Answer 1

我認為數據庫可能會將您的換行符<br>變成\n 。 它沒有渲染\n ，所以你可能需要一個.replace("\n","<br>") 。