CSS - сдвинуть длинный непрерывный текст внутри div вправо?

Question

У меня есть длинный текст, который не вписывается в занимаемый им div. Класс div выглядит следующим образом:

.mydiv {
    overflow:hidden;
    padding:3px 3px 3px 5px;
    white-space:nowrap;
}

Конечно, я могу видеть только часть текста. Проблема в том, что он показывает первые N символов, и я хочу показать последние N символов. Как мне добиться этого с помощью CSS? Text-align здесь не помогает.

Answer 1

Вы можете сделать это только с помощью CSS:

http://jsbin.com/ususu

  <div style="width: 150px; border: 1px solid red; overflow: hidden; position: relative; height: 2em;">
      <div style="position: absolute; right: 0px; padding: .5em;white-space:nowrap;">
  aaaaaaaaaaaabbbbbbbbbcccccccccccccccccddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeffffffffffffffffffffgggggggggggggggggggghhhhhhhhhhhhhhhhiiiiiiiiiiiii
     </div>
  </div>

(протестировано в Firefox. YMMV) * ​​1007 *

Answer 2

<div class="wrap">
    <div class="window">Lots of text</div>
</div>

.wrap { overflow: hidden; position: relative; }
.window { position: absolute; right: 0px; }

Answer 3

Если вы можете заключить текст в другой элемент, вы можете заставить его работать, как показано в this fiddle .Я поместил вложенное <span> вправо.

Answer 4

Вам придется использовать javascript, чтобы прокрутить div до упора вправо, попробуйте:

var obj = document.getElementById("div-id");
obj.scrollLeft = obj.scrollWidth - obj.clientWidth