通用化解決個性化文字換行問題

背景

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

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

例如：

原本是正常的文本流

This example creates a new intersection observer which calls the function

某些語言下，需要強制在某些點上換行

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

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

背景是vue框架

通用化的辦法解決

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

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

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

解釋一下這3步

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

作用

多行input（textarea） 增加換行能力，運營可以隨心所欲 在想要的地方加上換行

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

作用

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

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

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

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

例如：

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

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

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

總結(jié)

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

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

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

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

最新評論