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?

回答1:

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.

回答2:

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

回答3:

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

回答4:

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/

回答5:

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

回答6:

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

回答7:

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.