Как посоветуете реализовать заход содержимого за край?

Question

[Enniack]

Есть блок, в нем число. Необходимо, чтобы часть числа справа была сдвинута вправо за край и скрывалась, будто она находится ниже.



Как посоветуете реализовать?

Answer 1

[yaroslavgrishajev]

Реализовать это можно по разному в принципе, можно поместить элемент в котором размещена цифра в контейнер и сдвинуть его вправо отрицательным margin'ом, или position: relative + отрицательным значением right, либо сделать внешний контейнер меньше по ширине, чем надпись. В общем, зависить от ситуации и целей, но суть во том, что нужно скрыть, то что вылазит за границы контейнера посредством overflow: hidden. Намример, вот так можно:

<div>
  <p>750</p>
</div>

div {
  width: 125px;
  border-right: 2px solid black;
  overflow: hidden;
}

p {
  font-size: 100px;
  margin: 0;
}

Рабочий пример: fiddle