avoid Anchor links from breaking and wrap the whole word

Question

I have a question...

The subnavi on my website doesn't work proper... See the Screenshots: Here you see, how it looks like. The problem is, that the a-tag with "Mathematik & Naturwissenschaften" not resizes, if the browser window is small enough, so that the words wrap. It should look like the second picture, only with the wrap in a-tags with long words in it...

Here you see, how it should look like... (in full screen => without wrapping)

The HTML-Code:

<ul id="subnavi">    
    <li><a href="XYZ">Sprachen</a></li>
    <li><a href="XYZ">Gesellschaftswissenschaften</a></li>
    <li><a href="XYZ">Mathematik &amp; Naturwissenschaften</a></li>
    <li><a href="XYZ">künstlerisch-musische Fächer</a></li>
    <li><a href="XYZ">Religion</a></li>
    <li><a href="XYZ">Sport</a></li>
</ul>

The CSS-Code:

ul#subnavi a {
    float: left;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    padding-top: 2px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 150%;
    background-color: #9c9e9f;
    clear: left;
}

I hope, that you understand my problem and can help me... :( I searched so long for a solution but I found nothing...

Possible duplicate of [CSS Width / Max-Width on Line Wrap?](http://stackoverflow.com/questions/12377826/css-width-max-width-on-line-wrap). — showdev, Feb 11 '16 at 18:58
How is it not? As far as I can tell, that's the same issue. There's an explanation of the behavior and a link to a JavaScript solution. — showdev, Feb 11 '16 at 19:00
I correct me, I can't use Javascript... With pure CSS there is no solution? — Gykonik, Feb 11 '16 at 19:14

score 0 · Answer 1 · answered Feb 11 '16 at 18:33

Simply add the line white-space: nowrap; to the CSS part. Here's a working sample https://jsfiddle.net/zkmpwry9/.

The white-space property is used to describe how whitespace inside the element is handled.

nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

ul#subnavi a {
    float: left;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    padding-top: 2px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 150%;
    background-color: #9c9e9f;
    clear: left;
    white-space: nowrap; /* the extra line */
}

I want, that the text to wrap, but I don't want the space on the right, if it wraps... And white-space: nowrap; doesn't solve my problem, it only prohibits the wrapping, this is not my aim... — Gykonik, Feb 11 '16 at 18:40

score 0 · Answer 2 · answered Feb 11 '16 at 18:47

0

Use white-space: nowrap; this help to not colapse!

answered Feb 11 '16 at 18:47

Fakux

101
1
4

mm okey, so try this -> "overflow:hidden;" – Fakux Feb 11 '16 at 18:53

score 0 · Answer 3 · edited Feb 11 '16 at 20:54

0

You can use: white-space: nowrap;

edited Feb 11 '16 at 20:54

joe_young

3,991
2
24
36

answered Feb 11 '16 at 18:50

Microsmsm

2,854
3
17
35

avoid Anchor links from breaking and wrap the whole word

3 Answers3