html - 停止文本断行

Question

您好，我的网站有问题。出于某种原因，我的文字是断行。

例如，我有单词 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

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>