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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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/