如何使用flex属性使文本停止在每个空格的下一行？

Question

.span {
  flex-basis: 100%;
}

#outerSender {
  width: 100%;
  padding: 0 0 0 40%;
}

#sender {
  /*flex-grow: 1;*/
  max-width: 400px;
  color: white;
  margin: 2px 0 0 2px;
  display: flex;
  border: 1px solid #99CC66;
  overflow-wrap: break-word;
  font-size: 15px;
}

#innerSender {
  width: 100%;
  flex-grow: 1;
  right: 0;
  flex-shrink: 0;
  flex-basis: 0;
  padding: 8px;
  background-color: #009900;
  border: 1px solid #99CC66;
  border-radius: 15px;
}

<div id="outerSender">
  <div id="sender"><span class="span"></span>
    <div id="innerSender">fe wef wef ew wef</div>
  </div>
</div>

我正在尝试使用flex属性，但问题是在文本之间的每个空格处，它都换行了。

如何停止此操作？

Answer 1

要右对齐弹性项目，请使用justify-content: flex-end。

这不会单独起作用，因为您的span被告知采用全角，因此将div推到最右侧，并强行换行。 / p>

一种解决方案是允许使用flex-wrap: wrap

包装弹性项目

堆栈片段

.span {
  flex-basis: 100%;
}

#outerSender {
  width: 100%;
  padding: 0 0 0 40%;
}

#sender {
  /*flex-grow: 1;*/
  max-width: 400px;
  color: white;
  margin: 2px 0 0 2px;
  display: flex;
  flex-wrap: wrap;               /*  added  */
  border: 1px solid #99CC66;
  overflow-wrap: break-word;
  font-size: 15px;
  justify-content: flex-end;     /*  added  */
}

#innerSender {
  padding: 8px;
  background-color: #009900;
  border: 1px solid #99CC66;
  border-radius: 15px;
}

<div id="outerSender">
  <div id="sender">
    <span class="span"></span>
    <div id="innerSender">fe wef wef ew wef</div>
  </div>
</div>

<div id="outerSender">
  <div id="sender">
    <span class="span"></span>
    <div id="innerSender">fe wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef</div>
  </div>
</div>

---

如果span在那里完成相同的任务，只需将其删除，而不要使用flex-wrap

堆栈片段

#outerSender {
  width: 100%;
  padding: 0 0 0 40%;
}

#sender {
  /*flex-grow: 1;*/
  max-width: 400px;
  color: white;
  margin: 2px 0 0 2px;
  display: flex;
  border: 1px solid #99CC66;
  overflow-wrap: break-word;
  font-size: 15px;
  justify-content: flex-end;     /*  added  */
}

#innerSender {
  padding: 8px;
  background-color: #009900;
  border: 1px solid #99CC66;
  border-radius: 15px;
}

<div id="outerSender">
  <div id="sender">
    <div id="innerSender">fe wef wef ew wef</div>
  </div>
</div>

<div id="outerSender">
  <div id="sender">
    <div id="innerSender">fe wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef wef wef ew wef</div>
  </div>
</div>