Search code examples
htmlcsstextalignmentrow

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

enter image description here

As you can see in the highlighted part in the image there are two components.

  1. "Live" blue label
  2. The title

The problem is if we use a row, then the overflowed text will continue from the starting point of the second component.
What I want is: I want the overflowed text to start from the starting point of the whole row like the "South Africa" under "Live" label.

Any solution/ recommendation would be helpful. Thank you!

Solution

  • I would do this with display: flex; (also:flex-direction: column;)and setting a maximum width to avoid text continuing behind the live label:

    #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>

    Now you just have to insert the missing data and the height or width you prefer. For me, it worked out well like this. I used a Image for the Live-Label but it should be possible to use a div.