CSS获取文本在一行而不是两行 [英] CSS getting text in one line rather than two

问题描述

我有一个标题的小问题，我想要文本显示在一行，而不是分成两个，因为我试图安排这些块作为一个网格

I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid

jsFiddle

html

<div class="garage-row">
    <a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&amp;VID=4">
        <div class="garage-title">1996 Land Rover Defender</div>
        <div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
    </a>
    <div class="user-meta">
        <b>
            <a href="{block_1.row.U_COLUMN_2}">Hobbs92</a>
        </b>
    </div>
</div>

css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);


.garage-row {
    border: 1px solid #FFFFFF;
    float: left;
    margin-right: 5px;
    padding: 12px;
    position: relative;
    width: 204px;
}
    .garage-row img{}
.garage-image {
    background-position: center center;
    display: block;
    float: left;
    max-height: 150px;
    max-width: 204px;
    overflow: hidden;
    position: relative;
}

.user-meta {
    background: none repeat scroll 0 0 #2C3539;
    color: #FFFFFF;
    float: left;
    padding: 10px;
    position: relative;
    width: 184px;
}
img {
    border-width: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.garage-title {
    clear: both;
    display: inline-block;
    overflow: hidden;
}
.garage-row-title {
    font-size: 22px;
    font-weight: bold;
}
a:link {
    color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;

我非常感谢，如果有人能够帮助我把标题换成一行而不是两行，

I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.

推荐答案

添加white-space：nowrap; ：

.garage-title {
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

jsFiddle

这篇关于CSS获取文本在一行而不是两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！