javascript - css版面問題，可以用flex

Question

• #現在設計稿是這樣的，裡面支援1-6個字，垂直水平居中。

• 文字和圖片都是讀取介面拿的。

• 難點來了，四個字的時候，兩個字就換行了，五個字的時候，兩個字換行，下面有三個字，六個字的時候，是三個字換行。如果我給文字區限定範圍那他一定是先上面三個字，再下面兩個字。
  有沒有佈局大神幫忙解決一下？

Answer 1

文字呼叫這個函數處理一下唄

function linefeed(text) {
    var l = text.length;
    if (l <= 3) {
        return text
    }
    var cut = Math.floor(l/2);
    return text.slice(0, cut) + '<br>' + text.slice(cut)
}

Answer 2

文字和圖片都是介面拿的

那直接在 js 裡面做邏輯判斷啊，為什麼要用 css 解

Answer 3

樣式設定

p {
    white-space: nowrap
}

接著在取回的資料中，判斷文字長度，大於二就在第二個文字後面加上
換行符

Answer 4

用flex垂直水平劇中以後可以單獨設定文字p大小

Answer 5

用js加入換行符

Answer 6

wrap-reverse 可以第一行和第二行倒置