Question

I have an HTML (left-to-right) text element that I want to overflow to the left, chopping off the start of the text, if it is wider than the viewport, but if it’s narrower than the viewport to be left justified.

Here’s a quick ASCII-art diagram of what I mean:

+---------------------------+
|Long string of text        |
|                           |

vs.

+-----------+
|ing of text|
|           |

I can’t figure out if this is possible, much less how to do it if it is.

I don’t really care what technology is used to implement this, as long as it works in modern versions of Firefox and Chrome without plugins. I’d prefer it were kept to HTML and CSS, if possible.

Answer 1

I think I figured it out on my own:

<div style="position:absolute; right:0px; min-width:100%">
  <span style="text-align:right; white-space:nowrap">Long string of text</span>
</div>

This seems to create a box the width of the viewport, inside which is a box that contains the text. The text is aligned to the right of the box, which means that the overflow is to the left, but the box itself defaults to being left-justified, so if it’s smaller than the containing div, it just sits at the left.

Anything look wrong with that?