Overflow:hidden dots at the end

by

You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.

Here’s a demo on jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}
<div class="cut-text">
I like big butts and I can not lie.
</div>

More Related Contents:

  1. Grid or Table? for Text and an Image on the bottom right (4/4) [duplicate]
  2. Text in my heading should be top not bottom [closed]
  3. How do I disable the resizable property of a textarea?
  4. How do you keep parents of floated elements from collapsing? [duplicate]
  5. Center image using text-align center?
  6. Why do browsers match CSS selectors from right to left?
  7. How to remove margin space around body or clear default css styles
  8. How do I change the color of radio buttons?
  9. Make a div fill the height of the remaining screen space
  10. How can I draw vertical text with CSS cross-browser?
  11. How can I combine flexbox and vertical scroll in a full-height app?
  12. Is clearfix deprecated?
  13. CSS-Only Scrollable Table with fixed headers [duplicate]
  14. How to style SVG with external CSS?
  15. Pure CSS multi-level drop-down menu
  16. How to remove the gutter (spacing) between columns in Bootstrap?
  17. Creating a Zoom Effect on an image on hover using CSS?
  18. avoid page break inside row of table
  19. How to change the size of the radio button using CSS?
  20. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  21. Same height column bootstrap 3 row responsive
  22. Making an svg image object clickable with onclick, avoiding absolute positioning
  23. How to change the style of a ‘s label?
  24. CSS custom cursor doesn’t work in FF/Chrome
  25. Which elements support the ::before and ::after pseudo-elements?
  26. Flexbox with fixed header and footer and scrollable content
  27. Prevent a centered layout from shifting its position when scrollbar appears
  28. Prevent floated divs from wrapping to new line
  29. How to get horizontal scroll bar in select box in IE?
  30. Table with table-layout: fixed; and how to make one column wider

Leave a Comment