Element not shrinking to fit wrapping text

Question

The block size must not be greater than necessary.

I need to avoid the space to the right of the red line...

.item {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: green;
  margin-right: 20px;
}

.item-text {
  outline: 1px solid green;
  font-size: 20px;
  max-width: 100px;
}

<div class="item">
  <div class="item-icon"></div>
  <div class="item-text">lorem a morem</div>
</div>

I guess this is still not possible, take a look here [stackoverflow](http://stackoverflow.com/questions/13672760/max-width-adjusts-to-fit-text) — vadber, Dec 12 '16 at 09:40

score 0 · Answer 1 · edited May 23 '17 at 11:54

The problem you're having is simply how CSS works when wrapping text.

You can avoid the problem by adding a <br> tag where you want the break to occur.

Something like this:

.item {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: green;
  margin-right: 20px;
}

.item-text {
  outline: 1px solid green;
  font-size: 20px;
  max-width: 100px;
}

<div class="item">
  <div class="item-icon"></div>
  <div class="item-text">lorem a<br>morem</div>
</div>

Here's a more detailed explanation: Make container shrink-to-fit child elements as they wrap

the text is not controlled by me, and you need to work without — Hovsep Miskaryan, Dec 11 '16 at 15:31

score -1 · Answer 2 · answered Dec 11 '16 at 15:06

Use word-break property, like:

.item-text {
  word-break: break-all;
}

Have a look at the snippet below:

.item {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: green;
  margin-right: 20px;
}

.item-text {
  outline: 1px solid green;
  font-size: 20px;
  max-width: 100px;
  word-break: break-all;
}

<div class="item">
  <div class="item-icon"></div>
  <div class="item-text">lorem a morem</div>
</div>

Hope this helps!

@HovsepMiskaryan Is this isn't what you need can you please post a image showing your problem? — Saurav Rastogi, Dec 11 '16 at 15:35

Element not shrinking to fit wrapping text

2 Answers2