Css 长标题文本导致空白

当前我的电影标题代码如下所示：

.moview-info h1 {
color: #fff;
margin: 0 0 15px 0;
font-weight: normal;}

我试着添加以下几行：

display:block;
word-wrap: break-word;
max-width: 700px;

它在一定程度上解决了这个问题，因为当我缩小浏览器窗口时，星级会导致标题上升而不是重叠。除了不显示星级之外，还有什么办法可以解决这个问题吗

评级星号：

position: absolute;
left: 50%;
margin-left: -70px;
font-size: 130px;
width: 140px;
height: 140px;
line-height: 140px;

---

此样式通常使用

{display:flex；justify content:space between；}

作为标题和星号的父元素的CSS来完成。下面的演示（JS只是为文本设置动画）：

const titleElt=document.querySelector（“#title”）；
让titleValue=''；
设置间隔（（）=>{
如果（标题值长度>70）{
标题值=“”；
}否则{
titleValue+=Math.floor（10*Math.random（））；
}
titleElt.innerHTML=titleValue；
}, 100);
正文{
保证金：0；
字号：2em；
}
标题{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
#头衔{
宽度：90%；
单词包装：打断单词；
}
#明星{
宽度：10%；
}

⭐
此样式通常使用
{display:flex；justify content:space between；}
作为标题和星号的父元素的CSS来完成。下面的演示（JS只是为文本设置动画）：


const titleElt=document.querySelector（“#title”）；
让titleValue=''；
设置间隔（（）=>{
如果（标题值长度>70）{
标题值=“”；
}否则{
titleValue+=Math.floor（10*Math.random（））；
}
titleElt.innerHTML=titleValue；
}, 100);
正文{
保证金：0；
字号：2em；
}
标题{
显示器：flex；
证明内容：之间的空间；
宽度：100%；
}
#头衔{
宽度：90%；
单词包装：打断单词；
}
#明星{
宽度：10%；
}

⭐