vue框架通用化解決個性化文字換行問題範例詳解

2022-09-05 14:01:34

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

背景

首先我們網站內容是運營自己在內容平臺上去設定的，我們開發不用參與和release程式碼。並且是國際化，多語言的。

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

例如：

原本是正常的文字流

This example creates a new intersection observer which calls the function

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

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

因為這個問題，很容易經常被pm打擾，這種需要改程式碼和釋出上線的，雖然改程式碼很容易，但後續的自測和釋出上線還是很麻煩的，所以準備用一個通用的辦法來解決

背景是vue框架

通用化的辦法解決

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

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

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

解釋一下這3步

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

作用

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

第二步：所有文字處統一用v-text （vue）

作用

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

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

第三步：所有文字處統一增加一個樣式 white-space: pre-wrap

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

例如：

white-space: pre-wrap 可以統一包成一個classname，加到用了v-text的文字上去

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

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

總結

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

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

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

以上就是通用化解決個性化文字換行問題範例詳解的詳細內容，更多關於通用個性化文字換行的資料請關注it145.com其它相關文章！