通用化解決個(gè)性化文字換行問題

背景

首先我們網(wǎng)站內(nèi)容是運(yùn)營(yíng)自己在內(nèi)容平臺(tái)上去配置的，我們開發(fā)不用參與和release代碼。并且是國(guó)際化，多語言的。

在這種背景下，經(jīng)常碰到某種語言下，某些文字需要能夠增加換行的能力。

例如：

原本是正常的文本流

This example creates a new intersection observer which calls the function

某些語言下，需要強(qiáng)制在某些點(diǎn)上換行

В этом примере создается новый наблюдатель пересечения
который вызывает функцию

因?yàn)檫@個(gè)問題，很容易經(jīng)常被pm打擾，這種需要改代碼和發(fā)布上線的，雖然改代碼很容易，但后續(xù)的自測(cè)和發(fā)布上線還是很麻煩的，所以準(zhǔn)備用一個(gè)通用的辦法來解決

背景是vue框架

通用化的辦法解決

首先是不能用v-html來解決，這個(gè)很不安全，因?yàn)閮?nèi)容是別人在內(nèi)容平臺(tái)上去配置的。

總結(jié)一下通用化的改造辦法，3步

• 在內(nèi)容平臺(tái)上的單行input改成多行input（textarea）
• 所有文本處統(tǒng)一用v-text
• 所有文本處統(tǒng)一增加一個(gè)樣式 white-space: pre-wrap

解釋一下這3步

第一步：在內(nèi)容平臺(tái)上的單行input改成多行input（textarea）

作用

多行input（textarea） 增加換行能力，運(yùn)營(yíng)可以隨心所欲 在想要的地方加上換行

第二步：所有文本處統(tǒng)一用v-text （vue）

作用

• 消除 編輯器或格式化 的一些不必要的前后換行符和空格，例如：

這種寫法 會(huì)有一些不必要的前后換行符和空格
<div class="text-20 leading-[140%] text-center md:mb-[30px]">
  {{ paginationInfo }}
</div>
推薦用v-text消除這個(gè)差異
<div v-text="paginationInfo" />

第三步：所有文本處統(tǒng)一增加一個(gè)樣式 white-space: pre-wrap

作用：讓文本內(nèi)的換行符可以生效

例如：

white-space: pre-wrap 可以統(tǒng)一包成一個(gè)classname，加到用了v-text的文本上去

更詳細(xì)的了解white-space可以參考 developer.mozilla.org/zh-CN/docs/…

• 有興趣的朋友可以研究一下，為什么用 pre-wrap，而不是其他的

總結(jié)

如果我們的網(wǎng)站內(nèi)容是 運(yùn)營(yíng)自己去內(nèi)容平臺(tái)（CMS平臺(tái)）上去配置的，那么我們最好把所有有文字的地方，都提前這樣設(shè)計(jì)好，為以后的維護(hù)減少麻煩

另外插一嘴，網(wǎng)站內(nèi)容是 運(yùn)營(yíng)自己去內(nèi)容平臺(tái)（CMS平臺(tái)）上去配置的 有什么好處？

好處非常大，對(duì)需要做SEO，或經(jīng)常變更內(nèi)容的網(wǎng)站來說，這樣做可以極大的減少開發(fā)工作。并且更重要的是可以快速響應(yīng)，比如你的運(yùn)營(yíng)是美國(guó)pm，我們和美國(guó)有12小時(shí)時(shí)差，工作時(shí)間基本錯(cuò)開了，還有溝通成本

以上就是通用化解決個(gè)性化文字換行問題實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于通用個(gè)性化文字換行的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！