6

I'm writting a badge-ish block.

The problem is with the 3rd block (1 (Something something)), as you can see in the snippet, it overflows to the next line and leaves extra space on the right.

A picture of this problem same as described in the post

What should I do to get rid of that space?

It would be tremendously great if it's pure CSS and doesn't involve jQuery.

Thanks!

section {
  width: 8rem;
}

div {
  margin-top: 1rem;
}

.outer {
  background: blue;
  display: inline-flex;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
}
<section>
  <div class="outer">
    1
  </div>

  <div class="outer">
    Very very very long Textttttt
  </div>

  <div class="outer">
    1 (Something something)
  </div>

  <div class="outer">
    Test
  </div>
</section>
MongoLato
  • 351
  • 2
  • 20
  • 1
    short answer, you cannot – Temani Afif Mar 01 '19 at 08:10
  • 2
    @TemaniAfif You can! I wish you hadn't closed this. – Andy Hoffman Mar 01 '19 at 08:17
  • @AndyHoffman how? if you know I can reopen it or you can add your answer to the duplicate. (I also know another duplicate, will try to find it) – Temani Afif Mar 01 '19 at 08:23
  • 1
    @AndyHoffman you didn't remove the space, you simply added an extra element and hack this with a coloration (as a side note, you don't need the gradient, a simple color is fine) – Temani Afif Mar 01 '19 at 08:59
  • 1
    @TemaniAfif I think it would have solved this question, but am not in the mood to argue about it. Deleted. – Andy Hoffman Mar 01 '19 at 09:04
  • @AndyHoffman no need to argue or to delete. I am simply justifying the duplicate closure. If you think it solves the issue then keep it and it's up to the OP and the community to decide (not me). If it solve the issue of the OP, the question can be edited to hightlight the fact that the space shouldn't be *really* deleted and that hacks are allowed to visually hide it. In this case, the question will be different and answers too (I will also add my own hack) – Temani Afif Mar 01 '19 at 09:13
  • @TemaniAfif While I think my [re-added answer](https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width#answer-54940883) better solves *this* closed question, maybe it will still help somebody. – Andy Hoffman Mar 01 '19 at 09:43

0 Answers0