在 javascript ( alpine ) 中保留换行符答案

【问题标题】：Keep line breaks in javascript ( alpine )在 javascript ( alpine ) 中保留换行符
【发布时间】：2021-05-04 22:52:54
【问题描述】：

我正在使用一种功能，如果段落超过 200 个字符，它会剪切一个段落，并添加一个 ...read 更多按钮，当单击该按钮时，会显示整个文本。

问题是文本显示时没有换行符，并且从数据库中格式化，即使变量是通过 nl2br 从 PHP 传递的。

代码

<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>

如何使文本显示带有换行符？

【问题讨论】：

标签： javascript laravel alpine.js

【解决方案1】：

我认为数据库可能会将您的换行符<br> 变成\n。它没有渲染\n，所以你可能需要.replace("\n","<br>")。

【讨论】：

抱歉，现在它可以正确替换并添加
标签但不添加换行符。
嗯，您可能需要分享您的 CSS 代码。我从来没有使用过你的任何框架，我只是猜测，因为同样的事情发生在我身上。