div 内的文本在某些标签前后使用弹性换行符定位

Question

我一直在四处寻找，但我终究无法弄清楚发生了什么。我的文本被某些标签包裹起来，而我希望所有内容都在一行中。

我通过使用 display: flex;

将三个 DIV 元素并排对齐

这一切都很顺利，显示效果也正是我想要的。除了这样一个事实，出于某些无法解释的原因（至少对我而言），如果我在其中一个 div 中放置一个文本片段并且该文本片段包含诸如  或  之类的标签之间的内容，则标签前后的文字自动换行。

我这里有代码：

.pagetitlewrapper {
 width: 99%;
 background-color: #c1dbff;
 border-radius: 25px 25px 0px 0px;
 padding: 10px;
 display: flex;
  text-align: center;
}

.pagetitleleft,.pagetitlecenter,.pagetitleright {
 width: 33%;
 align-items: stretch;
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.pagetitleleft {
 text-align: left;
 font-size: 9;
}

.pagetitlecenter {
  text-align: center;
}

.pagetitleright {
 text-align: right;
 font-size: 9;
 resize: vertical;
}

 <div class='pagetitlewrapper'>
  <div class='pagetitleleft'>Welkom, FNAME LNAME</div>
  <div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
  <div class='pagetitleright'>
      Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
  </div>
</div>

围绕DON'T WRAP，我放了标签来说明问题。如果删除这些标签，文本将按我的意愿全部显示在一行中。基本上，我希望能够使 DON'T WRAP 变粗，而无需在文本前后换行。

我一直在网上搜索，无济于事。我在网上找到了几个代码片段，它们令人惊讶地做了同样的事情。我想知道为什么以前没有人运行解决过这个问题？

我试过 CSS 中的 white-space: nowrap; 玩一下，但似乎也没有用。

有人知道吗？有人可以指出我正确的方向吗？

谢谢，肯尼斯

Answer 1

为什么它换行是因为 pagetitleleft/center/right 元素上的 display: flex; flex-direction: column 使 span 成为弹性列项目并占用 100% 宽度。

通过将 display: flex 放在 pagetitleleft/center/right 元素上并将 align-items: center 设置为它们的父元素，它们的文本将垂直居中

.pagetitlewrapper {
 width: 99%;
 background-color: #c1dbff;
 border-radius: 25px 25px 0px 0px;
 padding: 10px;
 display: flex;
 align-items: center;
}

.pagetitleleft,.pagetitlecenter,.pagetitleright {
 width: 33%;
}

.pagetitleleft {
 text-align: left;
 font-size: 9;
}

.pagetitlecenter {
  text-align: center;
}

.pagetitleright {
 text-align: right;
 font-size: 9;
 resize: vertical;
}

<div class='pagetitlewrapper'>
  <div class='pagetitleleft'>Welkom, FNAME LNAME</div>
  <div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
  <div class='pagetitleright'>
      Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
  </div>
</div>

Answer 2

这种行为是有道理的，并且在 flexbox 规范中有定义。

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

您的右栏 (.pagetitleright) 是一个弹性容器 flex-direction: column:

.pagetitleleft,.pagetitlecenter,.pagetitleright {
   width: 33%;
   align-items: stretch;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

在此容器中，您有三个弹性项目：

<anonymous-flex-item>已授权给</anonymous-flex-item>
已授权给
<anonymous-flex-item>- 许可证有效期至 xx/xx/xxxx。</anonymous-flex-item>

因此，您将获得三个垂直堆叠的弹性项目。

用span、b、strong、em都没关系。您在容器中创建的任何元素都会成为弹性项目并相应地表现。

如果您不希望这些元素垂直堆叠，请不要使用 flex-direction: column。

Answer 3

有一个简单的。只需添加 white-space: pre-wrap;

Some-Flex-Container {
  display: flex;
  white-space: pre-wrap; /* solution */
}

div 内的文本在某些标签前后使用弹性换行符定位

Text inside a div positioned with flex linebreaks before and after certain tags

html

css

word-wrap

flexbox