Используя только CSS, покажите последние 3 буквы текста внутри элемента HTML5

Question

Если у меня есть элемент с фиксированной шириной и высотой, как я могу показать только последние 3 буквы текста внутри элемента HTML5 вместо первых 3 букв ?

.box {
  font-family: Arial, sans-serif;
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet</span>
</div>

Эллипсы не работали.Я пытаюсь достичь этого без JavaScript.

Есть ли решение только для CSS?

Answer 1

Использование direction: rtl;

.box {
  font-family: Arial, sans-serif;
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
 direction: rtl;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet</span>
</div>

Answer 2

Попробуйте

1002 *

function myFunction() {
    var str = "Lorem ipsum dolor sit amet";
    var res = str.slice(-3);
    document.getElementById("demo").innerHTML = res;
}
window.onload = myFunction;

<div class="box">
  <span id="demo"></span>
</div>

Answer 3

Добавление float: right; к span сделает это

Фрагмент стека

.box {
  font-family: Arial, sans-serif;
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
  float: right;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet</span>
</div>

---

Или display: flex; justify-content: flex-end; на .box

Фрагмент стека

.box {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: flex-end;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet</span>
</div>