CSS getting text in one line rather than two
HtmlCssHtml 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
html
<div class="garage-row">
<a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&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;
}
Solution 2 - Html
The best way to use is white-space: nowrap;
This will align the text to one line.