我正在做一个 Angular 应用程序，但我的样式有问题。
我做了一个例子来查看代码：https ://stackblitz.com/edit/angular-scss-demo-np12ot?file=src/app/app.component.scss
在应用程序中，我有一个带有 h1 和 h2 标签的 div。
Títle 1
The Louvre (English: /ˈluːv(rə)/ LOOV(-rə)[4]), or the Louvre Museum (French: Musée du Louvre [myze dy luvʁ] (About
this soundlisten)), is the world's largest art museum and a historic monument in Paris, France, and is best known
for being the home of the Mona Lisa.
这是css文件：
.ld-headings {
background-color: red;
height: 40vh;
.ld-title {
padding-top: 18vh;
margin: 0;
width: 65%;
color: white;
font-size: 3em;
user-select: none;
text-transform: uppercase;
font-weight: 400;
}
.ld-subtitle {
font-style: italic;
font-weight: 400;
color: white;
width: 50%;
font-size: 1.3em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
}
}
@media (max-width: 900px) {
.landing {
.ld-headings {
.ld-title {
font-size: 3em;
}
.ld-subtitle {
font-size: 1em;
}
}
}
}
一开始，我看到了这一点并且是正确的：
但是当我调整浏览器窗口的大小时，结果就是下一个。文字溢出：
我不明白为什么在我使用 em 单元时会发生这种情况。谁能帮我？
解决方案word-break: break-all;没用，我想保持 div 的高度。