2017-12-31 41 views
0

Ich benutze Vue Onsen UI zum Erstellen einer progressiven Web-App. Ich habe einen Titel, der ein wenig lang sein kann, und ich stelle ihn in die Mitte und erwarte, dass er sich normal wickelt, aber das tut er nicht. Die toolbar Klasse ist absolut positioniert.Wie wickle ich den Text innerhalb der absoluten div

Hier ist ein working example auf der Website.

Um es zu testen, müssten wir die Größe des Textes innerhalb der div.center erhöhen.

Kann mir jemand helfen, dieses Problem zu verstehen und zu beheben? Lassen Sie es mich wissen, wenn weitere Informationen benötigt werden.

Antwort

0

Es scheint, als ob die CSS-Klasse 'Zentrum' ist das Überschreiben der white-space und line-height Eigenschaften. Folgendes funktioniert für Sie:

.multiline-center { 
    height:100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    white-space:normal; 
    line-height:12pt 
} 

<div class="center"> 
    <div class="multiline-center"> 
     {{ title }} 
    </div> 
</div> 
Verwandte Themen