简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Javascript – CSS-Layoutproblem, Sie können Flex verwenden
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-19 10:22:11
0
6
532

  • 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?

曾经蜡笔没有小新
曾经蜡笔没有小新

Antworte allen(6)
phpcn_u1582
phpcn_u15822017-05-19 10:24:11 6 Etage

文字调用这个函数处理一下呗

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)
}
Wie +0
Antwort hinzufügen
Ty80
Ty802017-05-19 10:24:11 5 Etage

文字和图片都是接口拿的

那直接在 js 里面做逻辑判断啊，为什么要用 css 解决

Wie +0
Antwort hinzufügen
过去多啦不再A梦
过去多啦不再A梦2017-05-19 10:24:11 4 Etage

样式设置

p {
    white-space: nowrap
}

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

Wie +0
Antwort hinzufügen
PHPzhong
PHPzhong2017-05-19 10:24:11 3 Etage

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

Wie +0
Antwort hinzufügen
習慣沉默
習慣沉默2017-05-19 10:24:11 2 Etage

用js添加换行符

Wie +0
Antwort hinzufügen
过去多啦不再A梦
过去多啦不再A梦2017-05-19 10:24:11 1 Etage


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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！