Stop text from breaking lines - html

Question

Hi I have a problem with my site. For some reason my text is breaking lines.
For example I have the word Hip Hop but it's showing up as
Hip
Hop
here is the html
<div class="medium-2 column first-post-category">
<h1 class="category-first"><?php $cat = get_the_category(); $cat = $cat[0]; echo ''; echo $cat->cat_name; echo ''; ?></h1>
</div>
and here is the css
.first-post-category{
position:absolute;
top:6%;
left:1%;
}
.category-first{
background:#0076c1;
font-family:'Khula', sans-serif;
font-size:30px;
color:#fff;
padding:6px;
}
here a photo example.
Photo One

Answer 1

with your current code it renders fine, but whenever you don't want break text into another line use white-space: nowrap
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
.first-post-category {
position: absolute;
top: 6%;
left: 1%;
}
.category-first {
background: #0076c1;
font-family: 'Khula', sans-serif;
font-size: 30px;
color: #fff;
padding: 6px;
white-space: nowrap
}
<div class="medium-2 column first-post-category">
<h1 class="category-first">Hip Hop</h1>
</div>