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

Question

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

Answer 1

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>