改行を防ぐためにテキストを停止する

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> 

であり、ここで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; 
} 

です写真の例。あなたの現在のコードと

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>