May 11, 2012
Wrapping between nowraps
Question by Eric
I have a list of links that should be displayed inline.
The thing is I do not want the text to wrap in the middle of links. If it needs to wrap, it should only do so between links.
I have therefore added the white-space:nowrap; property to my link. But the resulting list of links never wraps and gets out of my div box.
Any idea how I can get my list to wrap between the links? Thank you!
<div class="box">
<p>
<a href="mylink1" class="mytag">Hello there</a>
<a href="mylink2" class="mytag">Hello you</a>
<a href="mylink3" class="mytag">Hello people</a>
<a href="mylink4" class="mytag">Hello world</a>
</p>
</div>
The relevant CSS is just:
.mytag,.mytag:link,.mytag:visited{
background-color:#FFF5CA;
border:1px solid #FFE5B5;
color:#222;
padding:2px 5px;
margin-right:5px;
white-space:nowrap;
}
.mytag:hover{
background-color:#FFE5B5;
}
Answer by Starx
Basically, white-space:nowrap; is doing exactly what it is supposed and that is not breaking the elements into multiple lines.
What you are actually looking for is to display the links on a single line, without the links wrapping onto the next line. Therefore, use a display property as inline-block.
.mytag,.mytag:link,.mytag:visited{
background-color:#FFF5CA;
border:1px solid #FFE5B5;
color:#222;
padding:2px 5px;
margin-right:5px;
display: inline-block;
}
