Javascript – CSS-Layoutproblem, Sie können Flex verwenden

Question

• Der Designentwurf sieht jetzt so aus, er unterstützt 1-6 Zeichen, vertikal und horizontal zentriert.

• Der Text und die Bilder werden alle über die Leseschnittstelle abgerufen.

• Hier kommt die Schwierigkeit. Bei vier Zeichen werden zwei Zeichen umbrochen. Bei fünf Zeichen werden zwei Zeichen umgebrochen. Wenn ich den Bereich des Textbereichs einschränke, müssen es zuerst die oberen drei Zeichen und dann die unteren beiden Zeichen sein.
  Gibt es einen Layout-Meister, der mir bei der Lösung dieses Problems helfen kann?

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
}

然后在取回的数据中，判断文字长度，大于二就在第二个文字后面加<br>换行符

Answer 4

用flex垂直水平剧中以后可以单独设置文字p大小

Answer 5

用js添加换行符

Answer 6

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