CSS getting text in one line rather than two

HtmlCss

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

Add white-space: nowrap;:

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

jsFiddle

Solution 2 - Html

The best way to use is white-space: nowrap; This will align the text to one line.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionngplaygroundView Question on Stackoverflow
Solution 1 - HtmlMattView Answer on Stackoverflow
Solution 2 - Htmlsubindas pmView Answer on Stackoverflow