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
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 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; }
Comments
Post a Comment