I have this very straightforward jumbotron class :

HTML

<div >Welcome to my fake shop</div>

CSS

body, html {
  margin:0;
  padding:0;
  height:100%
}

.jumbotron {
  background: blue;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
  text-align:center;
}

It works perfectly fine and as expected in CodePen:

1. Div is taking all the place
2. Text is centered both vertically and horizontally
3. If the font-size get larger, the phrase wraps onto the next line

However, this exact same code produces a different result in my code (angular)

1. Div is taking all the place - Good
2. Text is centered, both vertically and horizontally - Good
3. But if the font-size gets larger, instead of the phrase wrapping onto the new line, it overlaps the first one.

Any idea why?

CodePudding user response：

**Set line height **

.jumbotron {line-height:1.5;}