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

背景

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

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

例如：

原本是正常的文本流

This example creates a new intersection observer which calls the function

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

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

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

背景是vue框架

通用化的辦法解決

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

總結一下通用化的改造辦法，3步

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

解釋一下這3步

第一步：在內容平臺上的單行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

作用：讓文本內的換行符可以生效

例如：

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

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

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

總結

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

另外插一嘴，網站內容是 運營自己去內容平臺（CMS平臺）上去配置的 有什么好處？

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

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

最新評論