Make an tag move onto a new line, without using "display:block"

Question

I would like the navigation links on this page to each appear on their own line:

A. Without using "display:block" - as that makes the hover animation take up the full width of the container, not just the <a> element.

B. Without using <br> tags, as I am eventually looking to create a responsive site with a horizontal navigation on smaller screens.

Thanks for your help.

Maybe http://stackoverflow.com/questions/17721031/css-force-new-line/22925271#22925271 helps? — alxndr, Apr 08 '14 at 00:06

score 36 · Accepted Answer · edited Mar 17 '16 at 09:48

36

Have you tried float:left; clear:left ?

edited Mar 17 '16 at 09:48

Sangram Nandkhile

17,634
19
82
116

answered Apr 03 '12 at 20:18

Ricardo Castañeda

5,746
6
28
41

score 5 · Answer 2 · answered Apr 03 '12 at 20:19

5

wrap you navigation in ul, li:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

css:

ul {list-style: none} li {display: block}

This lets you style your anchors accordingly while forcing them to break lines.

answered Apr 03 '12 at 20:19

David Nguyen

8,368
2
33
49

Thanks for the quick response David, but I avoided using a list to make it easier to centre. – Caroline Elisa Apr 03 '12 at 20:33

score 4 · Answer 3 · answered Apr 03 '12 at 20:20

4

You can wrap the <a>'s in <div>'s and apply CSS to the div's to float:left, clear:left;

div.anchorContainer
{
    float:left;
    clear:left;
}

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>

answered Apr 03 '12 at 20:20

Khan

17,904
5
47
59

Thanks Jeff, but Cadence got there moments earlier! – Caroline Elisa Apr 03 '12 at 20:34
1

@CarolineElisa You should evaluate accepting this answer as it is more elaborate and helped me faster than Cadence's. – k0pernikus Jun 19 '12 at 11:06

score 0 · Answer 4 · answered Mar 31 '22 at 08:51

You can just apply word-break: break-all;

.parent-block {
  max-width: 250px;
  width: 100%;
  border: solid 1px black;
}

.long-link {
  word-break: break-all;
}

<div class="parent-block">
<a class="long-link">https://stackoverflow.com/questions/10000674/make-an-a-tag-move-onto-a-new-line-without-using-displayblock</a>
</div>

Make an tag move onto a new line, without using "display:block"

4 Answers4