how to overflow text to do this

I have multiple elements each has a short and main divs. I want to 开发者_JS百科keep short to one line. Right now, when the content exceeds one line, it moves to the next line. What I want however is to make it cut off the remaining text and display dots like this ... instead. Is this possible?

<div class="elem">
  <div class="short">   Text should stay on one line   </div>
  <div class="main">  </div>
</div>

.elem{
  width:150px;
}

Ideally, when the user hovers over the title and dots ..., he could see the full title in a simple html pop-up or something like that.

The following CSS will achieve the effect you want in browsers with CSS3 support:

.elem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 150px; }
.elem:hover { white-space: normal; }

Note that the text will expand when the mouse is over any part of it, not just the ellipsis.

For a Jquery solution, try this: http://jsfiddle.net/kA3uN/

$short = $('.short');
$short.html($short.html().substring(0,10) + " ...");

Just change 10 to whatever character length agrees with your layout. No need for CSS3! :D

You can use CSS's 3 text-overflow: ellipsis; property

EDIT

Sorry, guess I clicked to fast on send and didn't read the full question. With that CSS property you can clip the text to the width you want.

If you want it to appear on hover you only have to increase the div's width with the hover pseudo class like:

.elem:hover {
  width: 300px:
}