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

问题

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

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

回答2:

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.

来源：https://stackoverflow.com/questions/41661410/text-inside-a-div-positioned-with-flex-linebreaks-before-and-after-certain-tags