Menu
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&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.
556
We use the word–break property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The word–wrap property is used to split/break long words and wrap them into the next line.
By default, browsers display div tags (and paragraph tags, using “p” instead of “div” using block. That means that once the content is displayed, we render the next element on the next line of the page. If display is set to “inline”, then the content is rendered on the same line. Span tags work like this by default.
Use white-space: nowrap; or give that link more space by setting li 's width to greater values. I prevented line break in li items using display: inline; . Maybe this will also help others with similar problems. Its important to be careful with display: inline as it can have side effects.
There are a few ways to do it with pure CSS. Let's learn how to achieve that. The easiest way to limit text to n lines is to use line-clamp . N can be any positive number, but it will be two or three lines most of the time.
Add white-space: nowrap;:
.garage-title { clear: both; display: inline-block; overflow: hidden; white-space: nowrap; } jsFiddle
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
