javascript - masalah susun atur css, anda boleh menggunakan flex

Question

• Draf reka bentuk kini kelihatan seperti ini, ia menyokong 1-6 aksara, berpusat secara menegak dan mendatar.

• Teks dan gambar semuanya diperoleh melalui antara muka bacaan.

• Di sini datang kesukaran Apabila terdapat empat watak, dua watak akan membungkus. Jika saya mengehadkan julat kawasan teks, ia mestilah tiga aksara teratas dahulu, dan kemudian dua aksara bawah.
  Adakah tuan susun atur yang boleh membantu saya menyelesaikan masalah ini?

Answer 1

Panggil fungsi ini untuk memproses teks

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

Teks dan gambar semuanya diambil dari antara muka

Kemudian buat pertimbangan logik secara langsung dalam js, mengapa kita harus menggunakan css untuk menyelesaikannya

Answer 3

Tetapan gaya

p {
    white-space: nowrap
}

Kemudian dalam data yang diambil, tentukan panjang teks Jika lebih daripada dua, tambah aksara <br>

Answer 4

Gunakan flex secara menegak dan mendatar untuk menetapkan saiz p teks secara berasingan

Answer 5

Tambah watak baris baharu dengan js

Answer 6

bungkus-terbalikkan boleh terbalikkan baris pertama dan kedua