Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS no text wrap

Tags:

html

text

css

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>​ 
like image 419
Mithun Sreedharan Avatar asked Jul 22 '10 11:07

Mithun Sreedharan


People also ask

How do you not wrap text in CSS?

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).

How do I keep text from wrapping around an image in CSS?

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.

How do I make no wrap in HTML?

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.


2 Answers

Additionally to overflow:hidden, use

white-space:nowrap; 
like image 106
xor_eq Avatar answered Nov 11 '22 03:11

xor_eq


Just use:

overflow: hidden; white-space: nowrap; 

In your item's divs

like image 23
Macmade Avatar answered Nov 11 '22 04:11

Macmade