0

I'm using Vue Onsen UI for creating a progressive web app. I have a title which can be a little long and I'm placing it in the center expecting it to wrap normally, but it doesn't. The toolbar class is positioned absolutely.

Here is a working example on the website.

To test it we would need to increase the size of the text inside the div.center.

Can someone help me understand and fix this issue? Let me know if some more information is required.

aks
  • 8,796
  • 11
  • 50
  • 78

1 Answers1

0

It appears as though the CSS class 'center' is overriding the white-space and line-height properties. The following will work for you,

.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>
S. Hines
  • 101
  • 1
  • 7