Menu
Briefly, I have a field where the rightmost digits are most significant. (Naturally, this field comes from our affiliates' systems, based on their primary keys, so the left most digits only change once per epoch!)
Everyone knows CSS provides a RIGHT truncation with "text-overflow: ellipsis;". How (without adding code to the server to prepare that field via string-surgery) do we truncate the field on the LEFT, and put the "..." elipses on the LEFT?
(CSS3 is okay.)
265
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string. Syntax: text-overflow: clip|string|ellipsis|initial|inherit; Example: In the following example,we will consider ellipsis to use the test-overflow property in a table cell.
Definition and Usage The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.
text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)
Try to use this trick:
HTML
<p class="ellipsis">ert3452654546</p> CSS
.ellipsis { overflow: hidden; width: 60px; direction: rtl; margin-left: 15px; white-space: nowrap; } .ellipsis:after { position: absolute; left: 0px; content: "..."; } FIDDLE
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
