CSS: Change direction of text overflow without changing text order

Question

I've got some text and I need it to overflow off the left side of its container (I hide the overflow). Basically, I want it to look like this: enter image description here

Apparently, you have to you direction: rtl; to do this. Fiddle here.

The problem is that this changes some of the order of the text: hello, world? is displayed as ?hello, world, and 1+2=3 is displayed as 3=1+2.

I've tried playing with the unicode-bidi property, but I can only get that to put things completely right to left.

So, here's the actual question: How can I get text to overflow off the left side of its container without reordering the text?

Can you post an example of "expected output"

PhD
– PhD

2011-09-11 19:01:11 +00:00
Commented Sep 11, 2011 at 19:01 — PhD
– PhD, Commented Sep 11, 2011 at 19:01

Simon Arnold · Accepted Answer · 2011-09-11 18:56:02Z

5

Try:

text-align:right;
white-space:nowrap;
overflow:visible;

answered Sep 11, 2011 at 18:56

Simon Arnold

16.2k8 gold badges70 silver badges89 bronze badges

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

5 Comments

Nathan Over a year ago

Doesn't work. See forked fiddle. Again, the idea is to make the text overflow off the left side, not the right.

Simon Arnold Over a year ago

If you don't specify the h1 width and make it float right. It will overflow on the left side. Would that be what you are looking for ? jsfiddle.net/6JF9T/3

Nathan Over a year ago

Ah, I see. That's a good start, thanks. Problem is, I need to hide the overflow text (see parentheses on first line).

Nathan Over a year ago

The goal isn't to hide the overflow of the parent div, it's to hide the overflow of the h1.

Nathan Over a year ago

Actually, I just realized that I can add another invisible parent element just for this purpose. So, this works. Thanks!

Brombomb · Accepted Answer · 2011-09-11 19:06:41Z

0

If you have a specific block of text you need to manipulate try the text-indent property with a negative value like so:

text-indent: -20px

This probably won't work for dynamic text though.

answered Sep 11, 2011 at 19:06

Brombomb

7,0864 gold badges40 silver badges57 bronze badges

Comments

Khattab · Accepted Answer · 2013-11-10 17:53:49Z

0

You will need to wrap the English text into a span which has direction LTR, and the overflowed text has "inline-flex" like the following:

<div style="direction:rtl;width:150px;overflow:hidden;text-align:right;white-space:nowrap;">
    <div style="display:inline-flex">
        <span style="direction:ltr;">Hello people, I'm asking: 1+1=2, or what???</span>
    </div>
</div>

You will get: http://codepen.io/anon/pen/xKfGa

It is some how complicated, but I think this is the only right way, although it won't display perfectly on IE.

edited Nov 10, 2013 at 17:53

answered Nov 10, 2013 at 6:23

Khattab

212 bronze badges

Collectives™ on Stack Overflow

CSS: Change direction of text overflow without changing text order

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related