Question

我一直在寻找，但对于我的生活，我无法弄清楚发生了什么。我的文字被包裹在某些标签上，而我想要一行。

我通过使用display: flex;

将三个DIV元素彼此相邻

这一切都很好，显示正是我想要的方式。除了因为某些原因（至少对我而言），如果我在其中一个div中添加文本片段并且文本片段包含或等标记之间的内容，文本会在标记之前和之后自动换行到新行。

我的代码在这里：

＆＃13;

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

＆＃13;

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

＆＃13;

在DON'T WRAP附近，我添加了个标签来说明问题。如果删除这些标签，文本将全部显示在我想要的一行上。基本上我希望能够使DON'T WRAP加粗，而不会在文本之前和之后包装文本。

我一直在网上搜索，但没有用。我在网上发现了几个代码片段，令人惊讶地做了同样的事情。我想知道为什么之前没有人遇到这个问题？

我试图在CSS中使用white-space: nowrap;玩一下，但这似乎也不起作用。

任何人都有任何想法？有人可以指出我正确的方向吗？

谢谢，肯尼斯

Answer 1

为什么断线是因为display: flex; flex-direction: column元素上的pagetitleleft/center/right，这使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

Flex容器的每个in-flow子项都变为flex项，每个都是   连续运行的文本直接包含在flex中   容器包装在一个匿名的flex项目中。

您的右栏（.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。

在某些标记之前和之后使用flex linebreaks定位的div内的文本

2 个答案: