Please see see code http://jsbin.com/eveqe3/edit, also quoted below.
I need to show text inside the item divs in such a way the text appear only in the green box with specified width rest of the line need to be hidden. Any suggestions please...
<style> #container{ width : 220px; } .item{ float:left; border: 1px solid #0a0; width: 100px; height: 12px; padding 2px; margin: 0px 2px; } .clearfix{ clear: both; } </style> </head> <body> <div id="container"> <div class="item"> A very loooooooooooooooooooooong text </div> <div class="item"> Another looooooooooooooooooooong text </div> <div class="clearfix"> </div> </div> </body> </html>
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
You'll have to wrap your text in its own container. Since your <img> is floated to the left, you can use overflow: hidden on your newly-added container to achieve no wrapping of the text.
Attribute for <TD ...> NOWRAP NOWRAP indicates that text should not wrap in the cell. NOWRAP serves much the same purpose as the <NOBR> tag. For example, the following cell will not wrap not matter how long the text.
Additionally to overflow:hidden, use
white-space:nowrap;
Just use:
overflow: hidden; white-space: nowrap;
In your item's divs
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