絶対div内のテキストをラップする方法

Question

私はプログレッシブWebアプリケーションを作成するためにVue Onsen UIを使用しています。私は少し長いことができるタイトルを持っています、そして、私はそれが正常に包むことを期待してそれを中心に置いていますが、そうではありません。 toolbarクラスは絶対に配置されます。

ここにはworking exampleが掲載されています。

これをテストするには、div.center内のテキストのサイズを大きくする必要があります。

誰かがこの問題を理解して解決するのに役立つことができますか？さらに情報が必要な場合はお知らせください。

Answer 1

CSSクラスのセンターは "空白と行の高さにプロパティをオーバーライドしているかのようにそれが表示されます。以下はあなたのために働きます。

.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>