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 属性，但问题是在 text 之间的每个空格上，它都会换行。

我怎样才能阻止这个？

标签： htmlcssflexbox

Answer 1

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

在您的情况下，这不会单独起作用，因为您span被告知要采用全宽，因此将div尽可能向右推，并强制换行。

一种解决方案是允许弹性项目包装，使用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>