CODEWITHSUNDEEP
jquerycss
zmol
zmol

Reputation: 1901

how to overflow text to do this

I have multiple elements each has a short and main divs. I want to 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.

Upvotes: 1

Views: 1045

Answers (3)

Richard Poole
Richard Poole

Reputation: 3984

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.

Upvotes: 4

jlmakes
jlmakes

Reputation: 2965

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

Upvotes: 2

nunopolonia
nunopolonia

Reputation: 14427

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:
}

Upvotes: 1

Related Questions