html - CSS getting text in one line rather than two -


i have small issue title text display on single line rather split onto 2 im trying arrange these blocks 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 appreciate if able me title 1 line rather 2 or fix if title exceeds width gets ellipses.

add white-space: nowrap;:

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

jsfiddle


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -