Webサイト制作において文字の右側のはみ出しを制御し、要素の見た目を揃えることはよくあることだと思いますが、UIのデザインにおいては、しばしば「文字の左側のはみ出しを省略してほしい」と言われることがあります。
文字列の重要度として右側に行くほど重要度が増す場合などに当てはまります。
方法としてはバックエンド側で制御したり、JSで制御したりと、様々あるとは思いますが、実はCSSでもできてしまいます。

direction: rtlで文字の方向を指定する

アラビア語など、言語によっては右から左へ読む地域があります。
その対策としてdirection:rtlというプロパティが存在します。
こちらの仕様を利用し、文字を右から始まるようにします。
あとは通常のtext-overflow:ellipsisを指定すれば左側のはみ出しを省略可能です。

.rtl{
   direction: rtl;
   width:450px;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
}

inputを右端から始める

これを利用すれば数値などのinputをtype=”number”を使わずに右端から開始することも可能です。
input[type=”number”]は少し厄介な仕様なので数値入力を自前で制御したい場合などに使えるテクニックだと思います。

さいごに

Tableのセルなどの要素には text-overflow:ellipsis; が効かなかったりするのでそのあたりも注意して実装すれば、よりユーザービリティが向上すると思います。
是非参考にしてみてください。