html - 如何使用 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

要右对齐 flex 元素，请使用 justify-content: flex-end。

在你的情况下这不会单独工作，因为你的 span 被告知要全宽，因此会将 div 尽可能地推到右边，并强制换行。

一个解决方案是使用 flex-wrap: wrap

允许 flex 元素换行

堆栈片段

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