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.

Answer 1

This behavior makes sense and is defined in the flexbox specification.

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.

Your right column (.pagetitleright) is a flex container with flex-direction: column:

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

In this container, you have three flex items:

• <anonymous-flex-item>Licensed to</anonymous-flex-item>
• <span>Licensed to</span>
• <anonymous-flex-item>- License valid until xx/xx/xxxx.</anonymous-flex-item>

As a result, you're getting three flex items stacked vertically.

It doesn't matter if you use span, b, strong, em. Whatever elements you create in the container become flex items and behave accordingly.

If you don't want these elements to stack vertically, then don't use flex-direction: column.

Answer 2

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>