Question

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

.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;

short title long title

Answer 1

此定型通常是用做{ display: flex; justify-content: space-between; }作为标题和星形的父元素的CSS。下面的演示（JS只是为文本添加动画）：

const titleElt = document.querySelector('#title');
let titleValue = '';
setInterval(() => {
  if (titleValue.length>70) {
    titleValue = '';
  } else {
    titleValue += Math.floor(10*Math.random());
  }
  titleElt.innerHTML = titleValue;
}, 100);

body {
  margin: 0;
  font-size: 2em;
}
header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#title {
  width: 90%;
  word-wrap: break-word;
}
#star {
  width: 10%;
}

<header>
  <div id="title"></div>
  <div id="star">⭐</div>
</header>

长标题文本导致空白

1 个答案: