Insert ellipsis (…) into HTML tag if content too wide

by

The following CSS only solution for truncating text on a single line works with all browers listed at http://www.caniuse.com as of writing with the exception of Firefox 6.0. Note that JavaScript is totally unnecessary unless you need to support wrapping multiline text or earlier versions of Firefox.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

If you need support for earlier versions of Firefox check out my answer on this other question.

More Related Contents:

  1. HTML text-overflow ellipsis detection
  2. HTML – how can I show tooltip ONLY when ellipsis is activated
  3. Input type="text" with select functionality after clicking on Input type="text"
  4. how i can connect and login in mysql localhost in php by using this html code
  5. How to create a tag with Javascript?
  6. How to get the entire document HTML as a string?
  7. In jQuery, how do I select an element by its name attribute?
  8. Prevent contenteditable adding on ENTER – Chrome
  9. input type=file show only button
  10. Get value of input field inside an iframe
  11. Understanding Cross-Domain issue in Iframes
  12. How to change HTML Object element data attribute value in javascript
  13. how to add new to onclick with javascript
  14. Possible to associate label with checkbox without using “for=id”?
  15. Remove specific HTML tag with its content from javascript string
  16. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  17. How to change a value from JavaScript
  18. How to determine which html page element has focus? [duplicate]
  19. How to submit a form when the return key is pressed?
  20. Drawing rotated text on a HTML5 canvas
  21. How to scroll to an element in jQuery?
  22. How to create a collapsing tree table in html/css/js?
  23. Web browser: Hide mouse cursor [duplicate]
  24. Dynamically created SVG elements are not rendered by the browser
  25. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  26. Rotate div text after clicking on button using jquery and css
  27. Copy/Paste from Excel to a web page
  28. onclick event function in JavaScript
  29. Hot to get incomplete datetime-local input values
  30. Content of html page changed by jQuery but “View Source” don’t reflect the changes

Leave a Comment