如何在 CSS 中更改换行符规则 [重复]答案

【问题标题】：How to change new line text breaking rule in CSS [duplicate]如何在 CSS 中更改换行符规则 [重复]
【发布时间】：2019-07-12 13:23:23
【问题描述】：

我正在尝试制作一个靠近文本的图标。文本可以有不同的长度。问题是当 1 行有太多文本时，它会将文本分成新行，但文本块占用整个空间，即使文本更早中断。最接近的解决方案是 word-break：break-all。但这不合适。

还有其他方法可以更改文本中断规则吗？或者用 .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>

【问题讨论】：

澄清一下，您希望图标位于最后一个单词之后，与文本内联，就好像它是另一个文本字符一样？
“或者用 .text 块直接在文本结束的地方结束？” - 不，使用当前的 CSS 几乎是不可能的。
@sean 我添加图片来展示它应该是怎样的

标签： css flexbox word-break

【解决方案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>

【讨论】：

感谢您的回答，但我需要保留多行文字
谢谢，但是文本被删掉了。我正在尝试做一些不同的事情。这不是通常的行为。我添加了一张图片。我认为这是不可能的（

【解决方案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>

【讨论】：

感谢@Sonia。我正在尝试做一些不同的事情。这不是通常的行为。我添加了一张图片。但现在我认为这是不可能的（
@Volodymyr，你能分享一下代码吗