html - text overflow in "width:100%" page

Question

I have a page where links overflow the page. I wish they would stay on the line below.

I put the follow lines: display:inline-block; overflow: auto; But didn't work.

.hashtag {
            font-family: 'Titillium Web', sans-serif;
            padding: 28px;
            font-size: 30px;
            width: auto;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            background-color: rgb(98,124,169,0.8);
            color: white;
            display: inline-block;
            line-height: 1;

<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a>&nbsp;<a href="player-hd/podcasts.html" style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;overflow: auto;" class="hashtag">PODCASTS</a>

(Sorry my English) Thanks in advance.

Answer 1

You need to add vertical-align:middle; to .hashtag to stop the first element being dropped down. You can also add white-space: nowrap; to the parent center element to stop the elements wrapping.

center {
  white-space: nowrap;
}
.hashtag {
            font-family: 'Titillium Web', sans-serif;
            padding: 28px;
            font-size: 30px;
            width: auto;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            background-color: rgb(98,124,169,0.8);
            color: white;
            display: inline-block;
            line-height: 1;
            vertical-align:middle;
         }

<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a>&nbsp;<a href="player-hd/podcasts.html" style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;overflow: auto;" class="hashtag">PODCASTS</a></span>