Custom text-overflow CSS?

Question

I am aware this is possible via Javascript, as I have done it myself. However, as the platform I am building up gets bigger and bigger, I want to take as much JS heavy-load as possible. Furthermore, at this point in time, I think using the CSS text-overflow property is much more do-able as FireFox now supports it as well.

Anyhow, reading the text-overflow reference page on MDN, I got curious about that third parameter defined as "string". I do not know whether this refers to "the text-overflow property accepts string values", or if it is a parameter on its own (just like clip and ellipsis).

Essentially, I would just like to know if this string parameter would allow me to generate a custom text-overflow output, such as " ..". I have tried things like:

text-overflow: string(" ..");
text-overflow: " ..";
text-overflow: ellipsis-" ..";

Strings in CSS are like strings in other languages, delimited by quotes. No string() notation or anything like that. — BoltClock
– BoltClock, Commented Dec 6, 2011 at 15:06

Ryan Kinal · Accepted Answer · 2011-12-06 15:04:48Z

34

Based on the Compatibility Table at the bottom of the MDN documentation, it seems only Firefox 9+ supports a string value for text-overflow.

So, you're mostly out of luck on that one.

answered Dec 6, 2011 at 15:04

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cr0z3r Over a year ago

Oh, that sucks - seems that I completely missed that one. Is there anything you would recommend, CSS-wise?

Ryan Kinal Over a year ago

Unfortunately, no. text-overflow is one of a kind in the CSS world. You might have to turn to JavaScript if you really need this feature.

Ryan Kinal Over a year ago

Actually, now that I think about it, you might be able to combine selector { overflow: hidden; } and selector:after { content: ' ..'; }, if you knew that the text would always overflow.

Mr Lister Over a year ago

And several years later, I fully expected the other browsers to have it as well. I mean, it's been part of the W3C recommendations for a while now. Oh well.

BoltClock · Accepted Answer · 2012-09-22 19:35:51Z

2

Mozilla has gone ahead and proposed this syntax, and it's made an appearance in the early 2012 LC draft of the UI level 3 spec:

text-overflow: ' ..';

Or if you meant to append .. to the existing ellipsis:

text-overflow: '... ..';

However, there are no other known implementations yet besides Mozilla's own, and as such this syntax is at risk of being dropped from a later revision of the spec.

edited Sep 22, 2012 at 19:35

answered Apr 27, 2012 at 11:08

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Comments

Defims · Accepted Answer · 2017-02-11 14:38:19Z

a pure css method base on -webkit-line-clamp, and you can custom textoverflow css like a boss:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

Custom text-overflow CSS?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related