如何在CSS中更改换行符

Question

我正在尝试使图标靠近文字。文字可以有不同的长度。 问题是，当一行中有太多文本时，它会将文本拆分为新行，但是文本块占用了整个空间，即使文本更早就中断了。最接近的解决方案是断字：全力以赴。但这不合适。

还有其他更改文本破坏规则的方法吗？还是要使用.text块制作内容以直接在文本中断处结束？

这里是示例：

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

Answer 1

您可以添加overflow: hidden和white-space: nowrap属性

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

编辑1.0：

要保留多行文字

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

编辑2.0：

对于图像，它看起来像：

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

Answer 2

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