How can I apply margin depending on text wrapping?

Question

Please tell me how can I make the margin-left of the .number block be only if there is no wrapping in the text block. In the first option, everything is OK, in the second, the indent is not needed.

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
}

.block .text {
  display: flex;
  flex-wrap: wrap;
}

.block .text .number {
  background: blue;
  color: white;
  margin: 0px 10px;
}

<div class="block" style="width: 140px;">
  <div class="text">TEXT
    <div class="number">123</div>TEXT
  </div>
</div>

<div class="block" style="width: 50px;">
  <div class="text">TEXT
    <div class="number">123</div>TEXT
  </div>
</div>

You can't apply styles based on whether text wraps. Please revise your post to ask about your goal, not your proposed solution. What overall layout are you trying to achieve? — isherwood, Apr 28 '22 at 12:53
See [CSS-only detection of text overflows in HTML?](https://stackoverflow.com/questions/18844192/css-only-detection-of-text-overflows-in-html) — isherwood, Apr 28 '22 at 12:59

DreamTeK · Accepted Answer · 2022-04-28T13:17:38.250

I handle my flex wrapping by only using right margins.

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.block > div {
  margin-right: 10px;
}

.block .number {
  background: blue;
  color: white;
}

<div class="block" style="width: 100px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

<div class="block" style="width: 50px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

You can optionally omit the final margin if you want a flush final block.

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.block > div:not(:last-of-type) {
  margin-right: 10px;
}

.block .number {
  background: blue;
  color: white;
}

<div class="block" style="width: 100px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

<div class="block" style="width: 50px;">
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

If you want to get a clean consistant bounding box no matter how manny flex items are in the container and no matter what size the width is you can use top left spacing on the container and bottom right on the children:

.block {
  height: auto;
  background: grey;
  overflow: hidden;
  margin-bottom: 20px;
  display: inline-flex;
  flex-wrap: wrap;
  padding: 10px 0 0 10px;
}

.block > div {
  margin: 0 10px 10px 0;
}

.block .number {
  background: blue;
  color: white;
}


.w50{
  max-width:50px;
}

<div class="block">
  <div class="text">TEXT</div>
  <div class="number">123</div>
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

<div class="block w50">
  <div class="text">TEXT</div>
  <div class="number">123</div>
  <div class="text">TEXT</div>
  <div class="number">123</div>
</div>

Alternatively if your width is being determined by screen size then you can simple use a media query to alter the block once it wraps.

@media all and (max-width:100px) {
  .block .text .number {
    margin: 0;
  }
}

How can I apply margin depending on text wrapping?

1 Answers1