CSS text ottenere in una sola linea anziché due

Question

Ho un piccolo problema con un titolo in cui vorrei testo da visualizzare su una singola linea, piuttosto che divisa su due come nel tentativo di organizzare questi blocchi come una griglia

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; 

Apprezzerei molto se qualcuno fosse in grado di aiutarmi a ottenere il titolo su una riga anziché su due o addirittura a correggerlo in modo che se il titolo supera la larghezza, otterrà puntini di sospensione.

Answer 1

Aggiungere white-space: nowrap;:

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

jsFiddle