两个组件的行。如果文本溢出，它应该从左开始 HTML

Question

正如您在图像中突出显示的部分所看到的那样，有两个组件。

“直播”蓝标
标题

问题是如果我们使用一行，那么溢出的文本将从第二个组件的起点继续。
我想要的是：我希望溢出的文本从整行的起点开始，就像“Live”标签下的“南非”一样。

任何解决方案/建议都会有所帮助。谢谢！

Answer 1

我会使用 display: flex;（还有：flex-direction: column;）并设置最大宽度以避免文本在活动标签后面继续：

#everthing{
  height: 700px;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#title{
  height: 100px;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

<div id="everything">
  <img src="" alt="Main picture">
  <div id="title">
    <img src="" alt="Live">
    <span>Your Title</span>
  </div>
</div>

现在您只需插入缺失的数据和您喜欢的高度或宽度。对我来说，这样的效果很好。我为实时标签使用了图像，但应该可以使用 div.

两个组件的行。如果文本溢出，它应该从左开始 HTML

Row of two components. If the text overflows it should start from left in HTML

html

css

text

alignment

row