Wrap Anchor Links and adjust Width of Div

Question

I'm facing an issue with the sub-navigation menu on my website. The problem is that the <a> tag containing the text "Mathematik & Naturwissenschaften" doesn't resize properly when the browser window is small enough for the words to wrap. The desired appearance is without the "empty gray space".

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

ul#subnavi {
    list-style-type: none;
}

<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>

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 1 · Answer 1 · edited Feb 11 '16 at 20:54

1

You can use: white-space: nowrap;

edited Feb 11 '16 at 20:54

joe_young

4,107
2
27
38

answered Feb 11 '16 at 18:50

solimanware

2,952
4
20
40

score 0 · Answer 2 · 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 3 · 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

Wrap Anchor Links and adjust Width of Div

3 Answers3