显示在与跨度的两条线的文本

Question

请参阅下面的HTML和CSS代码。

HTML：

<a class="navbar-brand"  href="/index.php"> <img src="/img/logo.png" alt="logo"></a>
<span class="navbar-brand" style="font-family:'Arial';font-size:24pt">WEBSITE NAME</span>

CSS：

.navbar-brand {
width: 88px;
height: 88px; 
}
.navbar-brand img {
width: 100%;
height: auto;
}

我遇到的问题是跨度（网站名称）中的文字显示在页面的两行上，如下所示：

网站
NAME

我玩过CSS一直无济于事。我发现的是，当logo.png的图像设置为较小的尺寸时，文本实际上会坐在一条线上，但一旦图像尺寸增大，它就不会喜欢它。

Answer 1

将white-space:nowrap添加到范围：

span.navbar-brand{
 white-space:nowrap;
 width:auto;
}

http://jsfiddle.net/kk60youo/

Answer 2

在navbar-brand类上指定宽度为88px。但是在文字风格上你把所有大写的24px大小。这不适合这个给定的空间（88px）。在这种情况下，我的建议是将字体大小调整为14px左右。

由于