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

Please fill the form - I will response as fast as I can!