CODEWITHSUNDEEP
javascripthtmlcsshide
DannyD
DannyD

Reputation: 2881

How do I only display part of a string using css

I want to be able to display a string of characters up to 10 characters. If the string goes over 10 characters, I'd like to append '...' to the end.

For example, if I have the string:

'helloworldmynameisryan'

I want it to be displayed like so:

'helloworld...'

I'm just displaying my string in a div like this:

<div>DisplayMessage</div>

Is there a class that I could create that would only apply if the string were over 10 char?

Upvotes: 14

Views: 34443

Answers (7)

Abdelrahman Mahmoud
Abdelrahman Mahmoud

Reputation: 1

The best way is using:

text-overflow: ellipsis;

in your css

This will restrict your text to the width of the container. If the text exceeds the width, it will instead be displayed with an ellipsis (...).

This may help: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Upvotes: 0

Carrie Morrison
Carrie Morrison

Reputation: 111

Firefox does in fact now support this, you just need to ensure that whatever you are trying to 'truncate' has block level formatting and a width - which could be the parent.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}

Upvotes: 11

Sushant Sudarshan
Sushant Sudarshan

Reputation: 410

Unfortunately there isn't a good cross browser way to do this using only CSS. 'text-overflow' relies on the width of the string, and not the length of string as you need.

You can use the .length property of strings in javascript to achieve this

function ellipsify (str) {
    if (str.length > 10) {
        return (str.substring(0, 10) + "...");
    }
    else {
        return str;
    }
}

Hope this helps.

Upvotes: 16

Exception
Exception

Reputation: 8379

According to quirksmode, if there is a long text like 

 <div>11111111111111111111111111111111111111111111111111111111</div>

To wrap this you have many ways, use <wbr> tag like below 

 <div>111111111111111111111111111<wbr>11111111111111111111111111111</div>

It will be displayed like
1111111111111111111111 1111111111111111111111 or use &shy; instead of , output will be 

 111111111111111111111-
 1111111111111111111111

Or if you are looking for JS solution, then use this.

Upvotes: -1

Amrendra
Amrendra

Reputation: 2077

it´s called ellipsis and you can use it on a block element.

However it does not work in Firefox and you cannot set the width to exactly 10 characters as you cannot specify the width in characters in css.

If you want exactly 10 characters and Firefox compatibility you will have to use javascript or a server-side solution.

check ellipsis:http://www.quirksmode.org/css/textoverflow.html

or try this:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

jQuery plugin for this:

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Upvotes: 3

Naveen Narale
Naveen Narale

Reputation: 42

The ellipses is a css3 function and when testing in different browsers it has issues. A quick get around would be to define a specific with to the div or span with overflow hidden and then add a background images which says "..."

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Without using any serverside script or javascript you can not do this.

Use below function.

function LimitCharacter($data,$limit = 20)
{
    if (strlen($data) > $limit)
    {
        $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...';
        return $data;
    }
    else
    {
        return $data;
    }
}

call it as LimitCharacter($yourString,5);

Javascript

var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10)+"...";

CSS

.limtiCharClass {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

Upvotes: 4

Related Questions