Text-overflow ellipsis on left side

by

How about something like this jsFiddle? It uses the direction, text-align, and text-overflow to get the ellipsis on the left. According to MDN, there may be the possibility of specifying the ellipsis on the left in the future with the left-overflow-type value however it’s considered to still be experimental.

p {
  white-space: nowrap;
  overflow: hidden;
  /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}
<p>first > second > third<br /> second > third > fourth > fifth > sixth<br /> fifth > sixth > seventh > eighth > ninth</p>​

More Related Contents:

  1. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  2. How to hide css and js version details from weppalyzer in PHP
  3. How to make page loaders/animations/transitions
  4. Replacing css file on the fly (and apply the new style to the page)
  5. How to autosize a textarea using Prototype?
  6. Textarea Auto height [duplicate]
  7. How to change CSS property using JavaScript
  8. Bootstrap close responsive menu “on click”
  9. Why write when the mime type is set by the server?
  10. Positioning element at center of screen
  11. Using jQuery how to get click coordinates on the target element
  12. Is it possible to dynamically scale text size based on browser width?
  13. Responsive horizontal page sliding
  14. Need to find height of hidden div on page (set to display:none)
  15. How to build simple tabs with jQuery?
  16. Blur Img’s & Div’s in HTML using CSS
  17. What are the possible ways to hide an element via CSS [closed]
  18. Google Maps API v3: InfoWindow not sizing correctly
  19. What are some good ways to prevent people from copying my source code? [closed]
  20. Add CSS to with JavaScript?
  21. how to get the base url in javascript
  22. Scroll Position of div with “overflow: auto”
  23. Auto Mobile Site Redirect
  24. Styling Vuetify selectors
  25. How to get CSS class property in Javascript?
  26. How to keep elements non-refreshed
  27. How do you swap DIVs on mouseover (jQuery)?
  28. Jquery/Javascript Opacity animation with scroll
  29. How to get a leaflet map canvas to have a 100% height?
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment