How do I only display part of a string using css

Question

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?

An exact character count is difficult/impossible, but you can certainly restrict it to a width: http://stackoverflow.com/questions/15124838/how-to-keep-div-on-one-line-and-append-ellipses/15124873#15124873 — Tim M., Mar 14 '13 at 04:31
Character counts wont work with CSS. As Tim mentioned, your solution would have to be width based. Here's a simple solution: http://jsfiddle.net/8atfj/ — slamborne, Mar 14 '13 at 04:33

score 16 · Accepted Answer · answered Mar 14 '13 at 04:38

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.

score 10 · Answer 2 · answered Mar 14 '13 at 05:45

10

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 */
}

answered Mar 14 '13 at 05:45

Carrie Morrison

101
2

1

Why would 100px correspond to 10 characters displayed, except by accident? – Jukka K. Korpela Mar 14 '13 at 06:16
Looks better, clean and fast than javascript solution. – iLevi Mar 14 '13 at 16:53

score 4 · Answer 3 · answered Mar 14 '13 at 04:27

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 */
}

Amrendra · Answer 4 · 2013-03-14T04:32:19.770

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/

score 0 · Answer 5 · answered Mar 14 '13 at 04:29

0

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

answered Mar 14 '13 at 04:29

Naveen Narale

42
4

score 0 · Answer 6 · edited Feb 05 '19 at 12:34

0

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

edited Feb 05 '19 at 12:34

JensV

3,997
2
19
43

answered Feb 05 '19 at 12:10

Abdelrahman Mahmoud

1

score -1 · Answer 7 · answered Mar 14 '13 at 04:36

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  instead of , output will be

 111111111111111111111-
 1111111111111111111111

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

The question was about truncation, not wrapping. – Jukka K. Korpela Mar 14 '13 at 06:17 — Jukka K. Korpela, Mar 14 '13 at 06:17

How do I only display part of a string using css

7 Answers7

Linked