Needs use right "text-overflow" when "direction" is set to "rtl"

Question

I need to put "..." in the front of text and show only last part of it, when it fills div.

And do nothing when it is normal

<span class="file-upload-status" style="max-width:200px">
    C:\fakepath\996571_1398802860346752_2094565473_n.jpg
</span>
<br/>
<span class="file-upload-status" style="max-width:200px">
    C:\fakepath\1.jpg
</span>

Here is what i have : http://jsfiddle.net/CBUH4/5/

Here is what i need : enter image description here

Is it possible to do by Css, without using JavaScript or jQuery.

A simple `text-overflow: ellipsis;` will work in Firefox, but I dont think any other browser does it the way you have mentioned. — Harry, Aug 30 '13 at 12:02
I tried `text-overflow: ellipsis;` but it damages to `direction: rtl;` — Sahak Sahakyan, Aug 30 '13 at 12:10
I don't think this is possible with CSS, but if you are OK with JS, I can give a solution. — Harry, Aug 30 '13 at 12:11
@SahakSahakyan, what do you mean by “but it damages to `direction: rtl;`”? Doesn’t the title of the question mean that you *want* right-to-left directionality? — Jukka K. Korpela, Aug 30 '13 at 12:23
I will try to run this script when value changes. But CSS solution will be great. — Sahak Sahakyan, Aug 30 '13 at 12:27
Yes @Jukka K. Korpela. I dont need to show 'C:\fakepath\...' — Sahak Sahakyan, Aug 30 '13 at 12:28
Duplicate of [Text-overflow ellipsis on left side](http://stackoverflow.com/q/9793473/1577396). but I am not closing this post because the linked post has no perfect css solution. — Mr_Green, Aug 30 '13 at 12:58

score 3 · Answer 1 · answered Aug 30 '13 at 11:57

3

Maybe something like this: http://jsfiddle.net/CBUH4/8/

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

answered Aug 30 '13 at 11:57

Slavenko Miljic

3,836
2
23
36

Just one point mate. In Firefox, when the text is "One Two Three" and `ellipsis` is applied it becomes "... Two Three". But in other browsers it becomes "...One Two Th". The user wants the former. – Harry Aug 30 '13 at 12:27
@Mr_Green: That is strange. I am using Chrome Version 31.0.1612.2 dev-m. If it works fine, then it is great :) – Harry Aug 30 '13 at 12:37
@Harry I am using chrome version 29. – Mr_Green Aug 30 '13 at 12:43
@Mr_Green: Ok, you are using the latest stable version and I am using a development version. If it is working in the stable version, then let us hope it doesnt change :) – Harry Aug 30 '13 at 12:46
I use crome Version 29.0.1547.57 and its look [link]https://lh6.ggpht.com/A-RFe4N4gQ6V1Ni6G2ZIGQZTZLiSF4R5c5Ld-ogmvox_kgsP_eo6yiQZM1U09BCOJL7wJA=s170 – Sahak Sahakyan Aug 30 '13 at 12:54
@SahakSahakyan yeah that is what I can see from here. It is not perfect but it is close to what you want. – Mr_Green Aug 30 '13 at 13:00
@Mr_Green: I think that is where the issue is. User doesn't seem to want "..C:\fakep", he rather wants "...\fakepath". – Harry Aug 30 '13 at 13:05
Sorry @Mr_Green but it is not so close. I have a big form where file uploads are changed whit jQuery, there is no any `` displayes. And i want user to see his selected file last chars, when its name is bigger than 200px, for differ them, because there is always 'C:\fakepath' or same folder path in the front of filename. – Sahak Sahakyan Aug 30 '13 at 13:22
well then maybe something like this, with a pseudo element :before that will overlay the div. http://jsfiddle.net/CBUH4/12/ – Slavenko Miljic Aug 30 '13 at 13:57
@SlavenkoMiljic that is merging both :after elements to one. and then you are positioning at the element which required ellipsis. (Honestly, you wasted my time to understand what magic you did there). :D – Mr_Green Aug 30 '13 at 14:51
@SlavenkoMiljic this solution doesn't work when the last char is a symbol like '@'. Tested in Chrome and IE11. I will really appreciate some help to solve this bug. I dont know what to do :( – robsonrosa Apr 28 '15 at 12:43

Mr_Green · Answer 2 · 2013-08-30T14:33:49.357

2

This is the closest solution I could have got using just css. Still it has a drawback that we need to use multiple .'s which are approximately equal to the width of the span element.

Fiddle

HTML

<span class="file-upload-status ellipsis" style="max-width:200px">
    C:\fakepath\996571_1398802860346752_2094565473_n.jpg
</span>

<br/>
<span class="file-upload-status" style="max-width:200px">
    C:\fakepath\1.jpg
</span>

CSS

.file-upload-status {
    font-weight: bold;
    font-size: 16px;
    color: #888;
    background: #fff;
    border-radius: 7px;
    height: 27px;
    border: 1px solid #ccc;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
    display:inline-block;
    width: 200px;
    position: relative;
}
.file-upload-status:after {
    content:".................................";
    color: white;
    position: relative;
    background-color: white;
    z-index: 2;
}
.file-upload-status:before {
    content:"...";
    position:absolute;
    background-color: white;
    left: 0px;
    top: 0px;
    z-index: 1;
}

Suggestion: Give as much dots as possible :D

edited Aug 30 '13 at 14:33

answered Aug 30 '13 at 13:14

Mr_Green

40,727
45
159
271

Having a look at the image that is shown in OP, I just modified it a bit (that is apply rtl only for the div with ellipsis). Here is the [**fiddle**](http://jsfiddle.net/hari_shanx/CBUH4/11/). Feel free to add it to the answer if you are OK with it :) +1 for the sample. – Harry Aug 30 '13 at 13:23
Its good. But I must use Javascript to add `ellipsis` class to span when value in it is long :) – Sahak Sahakyan Aug 30 '13 at 13:32
@SahakSahakyan ya seems so.. I am still trying.. but no luck :( – Mr_Green Aug 30 '13 at 14:09
@SahakSahakyan I updated my post. It is somewhat more close now :) – Mr_Green Aug 30 '13 at 14:36
@Harry I updated my post. (pinged you assuming you might be interested for the solution). – Mr_Green Aug 30 '13 at 14:55
@Mr_Green: Yup, I am keeping track of this one mate. I have it in my Fav's list also :) – Harry Aug 30 '13 at 14:59
Thanks you all for looking into my problem. Still no changes in my browser :) I've decided to leave it as it is – Sahak Sahakyan Aug 31 '13 at 12:13
@SahakSahakyan which browser it is? and what is the version? – Mr_Green Sep 01 '13 at 03:22
Google Chrome Version 29.0.1547.62 m – Sahak Sahakyan Sep 01 '13 at 13:51

Needs use right "text-overflow" when "direction" is set to "rtl"

2 Answers2

Linked