vue文本識(shí)別"\n"換行問(wèn)題的解決方式

更新時(shí)間：2022年11月22日 10:02:31 作者：D_jing20

在頁(yè)面中經(jīng)常會(huì)遇到自定義文本,如果文本過(guò)長(zhǎng)就需要換行,在HTML中可以通過(guò)標(biāo)簽換行,也可以通過(guò)\n轉(zhuǎn)椅字符換行,下面這篇文章主要給大家介紹了關(guān)于vue文本識(shí)別“\n”換行問(wèn)題的解決方式,需要的朋友可以參考下

一、通過(guò) css屬性實(shí)現(xiàn)

設(shè)置 white-space: pre-wrap; 代碼如下：

<div style="white-space: pre-wrap;">{{含有\(zhòng)n的字符串}}</div>

擴(kuò)展：

white-space屬性值：

值	描述
normal	默認(rèn)。空白會(huì)被瀏覽器忽略。
pre	空白會(huì)被瀏覽器保留。其行為方式類(lèi)似 HTML 中的 <pre> 標(biāo)簽。
nowrap	文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。
pre-wrap	保留空白符序列，但是正常地進(jìn)行換行。
pre-line	合并空白符序列，但是保留換行符。
inherit	規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

二、使用v-html實(shí)現(xiàn)

首先，將字符串里的 \n 替換為 <br>，然后用 v-html 指令渲染字符串為 innerHTML 。代碼如下:

// JS部分
this.text = res.data.replace(/\n/g,'<br>')
// HTML部分
<div v-html="text"></div>

三、<pre>標(biāo)簽

pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。代碼如下:

<pre>{{含有\(zhòng)n的字符串}}</pre>

注意：在選擇<pre>標(biāo)簽時(shí)，如果文字太長(zhǎng)的行可能會(huì)撐開(kāi)固定寬度的容器或者超出容器范圍。解決方法：

pre {
//方法一：保留空白符序列，但是正常地進(jìn)行換行。
  white-space: pre-wrap;
//方法二：添加橫向滾動(dòng)條
  overflow-x: auto;
}

最后，雖然三種方法都可以實(shí)現(xiàn)，但本人比較推薦前兩種。

附實(shí)踐模塊，溫馨提示基于vant改造

效果圖：并且點(diǎn)擊黃色部分會(huì)進(jìn)行伸縮

html部分

<div>
          <!-- 文字較長(zhǎng)時(shí)，通過(guò)禁用 scrollable 屬性關(guān)閉滾動(dòng)播放 -->
            <van-notice-bar
                v-if="deptTip"
                background="#FFFBE8"
                :scrollable="false"
                wrapable
            >
                <div @click="showAllFn" v-cloak id="showAllclamp2" :class="[showAll?'':'clamp2']">
                     <van-icon style="float: left;line-height: 24px;padding-right: 7px;" name="volume-o" ></van-icon>
                     <div id="deptTip" v-html="deptTip"></div>
                </div>
                <template v-slot:right-icon>
                    <van-icon  style="position: absolute;right: 5px;bottom: 10px;" :name="icon" ></van-icon>
                </template>
            </van-notice-bar>
       </div>

css部分

.clamp2{
                overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;
            }

js 部分

隱藏和展示的時(shí)候

showAllFn(){
            this.showAll=!this.showAll
            this.showAll?this.deptTip=this.deptTip.replace(/\n/g,'<br>'):this.deptTip=this.deptTip2
        }