div 内的文本在某些标签之前和之后使用 flex 换行符定位 [英] Text inside a div positioned with flex linebreaks before and after certain tags

问题描述

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

我通过使用 display: flex;

将三个相邻的 DIV 元素对齐

这一切都很好，显示效果正是我想要的.除了以下事实之外，出于某种无法解释的原因(至少对我而言)，如果我将一个文本片段放在其中一个 div 中，并且该文本片段在诸如 <之类的标签之间包含某些内容/code> 或 <b></b>，文本在标签前后自动换行.

我有代码:

.pagetitlewrapper {宽度:99%；背景颜色:#c1dbff；边框半径:25px 25px 0px 0px;填充:10px；显示:弹性；文本对齐:居中；}.pagetitleleft,.pagetitlecenter,.pagetitleright {宽度:33%；对齐项目:拉伸；显示:弹性；对齐内容:居中；弹性方向:列；}.pagetitleleft {文本对齐:左；字体大小:9；}.pagetitlecenter {文本对齐:居中；}.pagetitleright {文本对齐:右；字体大小:9；调整大小:垂直；}

 
<div class='pagetitleleft'>Welkom, FNAME LNAME</div><div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div><div class='pagetitleright'>许可不要包裹;- 许可证有效期至 xx/xx/xxxx.

在 DON'T WRAP 周围，我放置了 标签来说明问题.如果删除这些标签，文本将按照我的需要全部显示在一行上.基本上我希望能够使 DON'T WRAP 加粗，而不用前后包裹文本.

我一直在网上搜索，但无济于事.我在网上发现了一些代码片段，它们令人惊讶地做了同样的事情.我想知道为什么以前没有人遇到过这个问题?

我曾尝试在 CSS 中使用 white-space: nowrap; ，但这似乎也不起作用.

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

谢谢，肯尼斯

解决方案

为什么断线是因为 display: flex;pagetitleleft/center/right 元素上的 flex-direction: column，使 span 成为一个 flex 列项并占据 100% 的宽度.

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

.pagetitlewrapper {宽度:99%；背景颜色:#c1dbff；边框半径:25px 25px 0px 0px;填充:10px；显示:弹性；对齐项目:居中；}.pagetitleleft,.pagetitlecenter,.pagetitleright {宽度:33%；}.pagetitleleft {文本对齐:左；字体大小:9；}.pagetitlecenter {文本对齐:居中；}.pagetitleright {文本对齐:右；字体大小:9；调整大小:垂直；}

<div class='pagetitleleft'>Welkom, FNAME LNAME</div><div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div><div class='pagetitleright'>许可不要包裹;- 许可证有效期至 xx/xx/xxxx.

I have been searching around, but for the life of me I cannot figure out what's going on. My text is getting wrapped at certain tags, while I want it all on one line.

I have aligned three DIV elements next to each other through the use of display: flex;

This all works out quite nicely and display is exactly the way I want it. Except for the fact that, for some unexplicable reason (at least to me), if I put a text snippet in one of those divs and that text snippet contains something between tags like <span></span> or <b></b>, the text is automatically wrapped before and after the tag onto a new line.

I have the code here:

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

Around the DON'T WRAP, I have put <span> tags to illustrate the problem. If you remove these tags, the text is all displayed on one line as I want it. Basically I want to be able to make DON'T WRAP bold without it wrapping the text before and after.

I have been searching the web, to no avail. I found a couple of code snippets online which surprisingly did the same thing. I wonder why nobody ran into this problem before?

I have tried to play a bit with white-space: nowrap; in CSS, but that didn't seem to work either.

Anyone has any idea? Someone can point me in the right direction?

Thanks, Kenneth

解决方案

Why it break line is because of the display: flex; flex-direction: column on the pagetitleleft/center/right elements, which make the span a flex column item and take 100% width.

By dropping the display: flex on the pagetitleleft/center/right elements and set align-items: center to their parent, their text will center vertically

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

这篇关于div 内的文本在某些标签之前和之后使用 flex 换行符定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！