1

I`m trying to make an icon to be close to the text. The text can have different length. The problem is when there are to much text for 1 line, it breaks text into the new line, but the text block takes the whole space, even if the text breaks earlier. The closest solution is word-break: break-all. But it's not suitable.

It there any other way to change text breaking rule? Or to make something with .text block to end directly where the text breaks?

Here the example: enter image description here

.block {
  display: flex;
  width: 125px;
  background: grey;
  margin-bottom: 10px;
}

.icon {
  width: 25px;
  height: 25px;
  background: red;
}
<div class="block">
  <div class="text">text text text text text</div>
  <div class="icon"></div>
</div>

<div class="block">
  <div class="text">text text</div>
  <div class="icon"></div>
</div>
Volodymyr
  • 198
  • 1
  • 2
  • 12
  • 1
    To clarify, you want the icon to be after the last word, inline with the text, almost as if it were another text character? – Sean Jul 12 '19 at 13:32
  • 1
    _“Or to make something with .text block to end directly where the text ends?”_ - no, that is close to impossible using current CSS. – misorude Jul 12 '19 at 13:34
  • @sean I add image to shouw how it should be – Volodymyr Jul 13 '19 at 14:20

2 Answers2

2

you can add the overflow: hidden and white-space: nowrap properties

.block {
  display: flex;
  width: 125px;
  background: grey;
  margin-bottom: 10px;
}

.icon {
  width: 25px;
  height: 25px;
  background: red;
}

.noBreak{
  width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
<div class="block">
  <div class="text noBreak">text text text text text</div>
  <div class="icon"></div>
</div>

<div class="block">
  <div class="text">text text</div>
  <div class="icon"></div>
</div>

Edit 1.0:

To keep multiple line text

.block {
  display: flex;
  width: 125px;
  background: grey;
  margin-bottom: 10px;
}

.icon {
  width: 25px;
  height: 25px;
  background: red;   
  display: inline-block;
}
<div class="block">
  <div class="text noBreak">text text text text text
  <div class="icon"></div>
  </div>
</div>

<div class="block">
  <div class="text">text text</div>
  <div class="icon"></div>
</div>

Edit 2.0:

For an image it would look like:

.block {
  display: flex;
  width: 125px;
  background: grey;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

.icon {
  width: 25px;
  height: 25px;
  background-image: url("https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"); 
  background-size: cover;
  display: inline-block;
}
<div class="block">
  <div class="text noBreak">text text text text text
  <div class="icon"></div>
  </div>
</div>

<div class="block">
  <div class="text noBreak">text text
  <div class="icon"></div>
  </div>
</div>
Lucas
  • 275
  • 8
  • 37
  • thanks for the answer, but I need to keep multiline text – Volodymyr Jul 12 '19 at 13:28
  • thanks, but it's cut the text. I'm trying to make a little bit different. It`s not a usual behavior. I added a picture. I'm thinking that it is impossible ( – Volodymyr Jul 13 '19 at 14:23
1

.block {
  display: flex;
  width: 125px;
  background: grey;
  margin-bottom: 10px;
}

.text {
flex: 0 0 100px;
}

.icon {
  width: 25px;
  height: 25px;
  background: red;
}
<div class="block">
  <div class="text">text text text text text</div>
  <div class="icon"></div>
</div>

<div class="block">
  <div class="text">text text</div>
  <div class="icon"></div>
</div>
Sonia
  • 1,909
  • 1
  • 11
  • 13