Stoppt den Text von den Zeilen

Question

Hi Ich habe ein Problem mit meiner Website. Aus irgendeinem Grund bricht mein Text die Zeilen.

Zum Beispiel habe ich das Wort Hip Hop aber es zeigt sich als

Hip Hop

hier ist die html

<div class="medium-2 column first-post-category"> 
<h1 class="category-first"><?php $cat = get_the_category(); $cat = $cat[0]; echo '<a href="' . get_bloginfo('url') . '/category/' . $cat->category_nicename . '">'; echo $cat->cat_name; echo '</a>'; ?></h1> 
</div> 

und hier ist die 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; 
} 

hier ein Foto Beispiel.

Photo One

Answer 1

mit Ihrem aktuellen Code macht es in Ordnung, aber wenn Sie nicht wollen, Text brechen in eine andere Leitung white-space: nowrap

nowrap

Collapses Leerzeichen wie für normal, unterdrückt aber Zeilenumbruch (Textumbruch) im 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>