Wrapping links inside a fixed width div

Question

I have a fixed width div, containing a bunch of links, each one has text with non breaking spaces between the words.

What I am trying to achieve, is that when a link hits the edge of the div the whole link moves down a line.

I was just playing about in JSFiddle,and initially I had one long unformatted (no tags on new lines, etc) piece of html, and was observing the final link not moving onto a new line.

I then decided to reformat, so put new tags on lines, and after doing so, the final tag now moves onto a new line when it gets restricted by the width of the div.

I am actually generating the html dynamically from a script, and at present it just produces a single concatenated string for me to then render. Here is the HTML I am using and a working fiddle showing the results of both approaches:

http://jsfiddle.net/8gdez8ur/2/

<div style="width: 350px; overflow: hidden;"><a href="#" action="zoom" style="font-size:11px;padding-right:2px;">Zoom</a><a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street&nbsp;View</a><a action="addplacemarker" href="#" style="font-size:11px;padding-right:2px;">Add&nbsp;Placemarker</a><a action="route" href="#" style="font-size:11px;padding-right:2px;">ETA&nbsp;To</a><a action="reportproblem" href="#" style="font-size:11px;padding-right:2px;">Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#" style="font-size:11px;">Send&nbsp;Message</a></div>
<hr>
<div style="width: 350px; overflow: hidden;">
<a href="#" action="zoom" style="font-size:11px; padding-right:2px;">Zoom</a>
<a action="streetview" href="#" style="font-size:11px; padding-right:2px;">Street&nbsp;View</a>
<a action="addplacemarker" href="#" style="font-size:11px; padding-right:2px;">Add&nbsp;Placemarker</a>
<a action="route" href="#" style="font-size:11px; padding-right:2px;">ETA&nbsp;To</a>
<a action="reportproblem" href="#" style="font-size:11px; padding-right:2px;">Incorrect&nbsp;Location&nbsp;Details</a>
<a action="sendmessage" href="#" style="font-size:11px; padding-right:2px;">Send&nbsp;Message</a>
</div>

Why is there a difference in behaviour here? Thanks

in the last anchor from first div exists "padding-right:2px" missing — Jose Ricardo Bustos M., Apr 17 '15 at 13:07
Thanks for pointing that out, but it doesn't help me in this case — mindparse, Apr 17 '15 at 13:10

score 3 · Accepted Answer · answered Apr 17 '15 at 13:18

I believe the reason this is happening is because the lack of white space between your inline elements which causes it to render effectively as one long string. Try setting your anchor tags to be inline-block.

a{
    display: inline-block;
}

Here is the fiddle

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

Seems to be related to New line between anchors in HTML source creates empty space in browser

However to fix it for what I believe the OP wanted, is to add whitespace after each anchor, eg add   if possible.

edited May 23 '17 at 12:22

Community

1
1

answered Apr 17 '15 at 13:18

Morvael

3,478
3
36
53

score 1 · Answer 3 · answered Apr 17 '15 at 13:20

1

Line breaks in your code (second example) generate whitespace, thus it's rendered the way you want it. The first example would be in one line, but there is a leading space in your second link.

By adding

div a { display: inline-block; }

to your first example, you can get the effect you want.

answered Apr 17 '15 at 13:20

Paul

8,974
3
28
48

Thanks, someone else beat you to it, but your variation is also useful. – mindparse Apr 17 '15 at 13:23

score 1 · Answer 4 · answered Apr 17 '15 at 13:28

Although using inline-block is a way of fixing the problem, the source of the issue in your original post is in the following snippet of code:

<a action="streetview" href="#" style="font-size:11px;padding-right:2px;"> Street&nbsp;View</a>

If you look carefully, you have a single space between ">" and "Street", which is enough to cause the line break after the first a element.

If you remove the space, then the line does indeed stay on one line and is clipped because of the overflow: hidden.

div {
    width: 350px;
    overflow: hidden;
    border: 1px dotted blue;   
}
div a {
    font-size: 11px;
    padding-right: 2px;
}

<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" > Street&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div>
<hr>
<div><a href="#" action="zoom" >Zoom</a><a action="streetview" href="#" >Street&nbsp;View</a><a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a><a action="route" href="#" >ETA&nbsp;To</a><a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a><a action="sendmessage" href="#">Send&nbsp;Message</a></div>
<hr>
<div>
<a href="#" action="zoom" >Zoom</a>
<a action="streetview" href="#" >Street&nbsp;View</a>
<a action="addplacemarker" href="#" >Add&nbsp;Placemarker</a>
<a action="route" href="#" >ETA&nbsp;To</a>
<a action="reportproblem" href="#" >Incorrect&nbsp;Location&nbsp;Details</a>
<a action="sendmessage" href="#" >Send&nbsp;Message</a>
</div>

Wrapping links inside a fixed width div

4 Answers4