Остановить текст от разрывов линий

Question

Привет У меня проблема с моим сайтом. По какой-то причине мой текст разбивает строки.

Например, у меня есть слово Hip Hop но это отображается как

Hip Hop

вот 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> 

и вот устанавливаемыми сотовыми

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

здесь фото пример.

Photo One

Answer 1

с текущим кодом он делает хорошо, но всякий раз, когда вы не хотите разбить текст на другое использование линии white-space: nowrap

Nowrap

Обвалы пробельных, как для нормальный, но подавляет разрывы строк (перенос текста) в тексте.

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