1

The three dots will appear when the name of the string is bigger than a limit, the limit is defined by counting the characters which can be

replace the last 3 characters with … . e.g. let’s say my name has 30 characters but the screen label field can take only 15 characters than use the first 12 characters and replace the 13,14 and 15th character with …

On mouse over of this label with … show the complete name ( ie 30 characters )

How could i achive this in jquery ? or html

Nestor C
  • 637
  • 3
  • 9
  • 14

4 Answers4

5

You can handle it by using css instead of using any javascript. There is text-overflow in css for making the effect ... when the string is over the width. If you would like to show the original text, you would add :hover in css to remove the overflow boundary.

The alternative is using javascript to count the content length and modify the content with ellipsis. Also, if you want to show original text, use hover() but you have to store the original text first.

So, there are two solutions, check this for detail: http://jsfiddle.net/zqfhx/1/

CSS

<style type="text/css">
.w100C {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    width: 100px;
    min-width: 0;
}

.w100C:hover {  
    overflow: none;
    width: auto;
}
</style>

HTML

<div class="w100C">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever s
</div>

Alternative method with Javascript(jQuery)

JavaScript

$(document).ready(function() {

    function TruncateText(text)
    {
        if(text.length > 12)
        {
             text = txt.substring(0,12) + "...";
        }
        return text;
    }

    var txt = $("#abc").text();
    $("#abc").attr("orgTxt", txt);
    txt = TruncateText(txt);
    $("#abc").text(txt);

    $("#abc").hover(function(){
        var t = $("#abc").attr("orgTxt");
        $("#abc").text(t);
    }, function(){
        var t =  $("#abc").text();
        t = TruncateText(t);
        $("#abc").text(t);
    });    
});

HTML

<div id="abc">I am very long string</div>

Personally, I will recommend to use CSS instead of JavaScript as it can handle multiple element by styling and reducing the script execution.

Derek
  • 2,695
  • 1
  • 16
  • 17
  • 1
    The CSS solution is perfect - easy, flexible, and more accurate (takes into account size in pixels rather than just counting characters). – strah Mar 05 '13 at 15:23
3

This doesn't need jQuery

var str = "whatever here"
var shortened = str.length > 15 ? str.substring(0,12) + '...' : str;
Jamiec
  • 133,658
  • 13
  • 134
  • 193
0

If you are just trying to "fit" based on element size, you may want to try text-overflow.

JSFiddle for illustrative purposes

Moz Docs for text-overflow

brbcoding
  • 13,378
  • 2
  • 37
  • 51
0

Assuming your content goes within a div with id "content" and your string is saved within a longString variable

$(document).ready(function() {
    var contentDiv = $("#content");
    contentDiv.html(longString.substr(0,12) + "...");

    contentDiv.mouseover(function(){ 
         this.html(longString);
    });

    contentDiv.mouseout(function(){
         this.html(longString.substr(0,12) + "...");
    });
});

This is untested, but it should give you the show and hide functionality you need. It also assumes the string is always at least 12 characters. If error checking is needed, you can add it easily.

Clayton
  • 70
  • 9