[英]Text overlapping itself instead of going to next line
I have this very straightforward jumbotron class :我有这个非常简单的 jumbotron 类:
HTML HTML
<div class="jumbotron">Welcome to my fake shop</div>
CSS 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: https://codepen.io/laudem/pen/ZExYvMZ它在 CodePen 中工作得非常好并且符合预期: https ://codepen.io/laudem/pen/ZExYvMZ
font-size
get larger, the phrase wraps onto the next linefont-size
变大,短语会换行到下一行However, this exact same code produces a different result in my code (angular)但是,这个完全相同的代码在我的代码中产生了不同的结果(角度)
font-size
gets larger, instead of the phrase wrapping onto the new line, it overlaps the first one.font-size
变大,而不是短语换行到新行,它会与第一个重叠。 Any idea why?知道为什么吗?
**设置行高**
.jumbotron {line-height:1.5;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.