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

样式设置

div {
    white-space: nowrap
}

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

Answer 4

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

Answer 5

用js添加换行符

Answer 6

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