- Instant help with your CSS coding problems

Add dots if text is too long

Question:
How to add dots if text is too long?
Answer:
.text-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 10px;
  border: 1px solid #ccc;
}
Description:

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped , display an ellipsis ('…'), or display a custom string.

The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).

Share "How to add dots if text is too long?"
Related snippets:
Tags:
truncate string with dots, hide too long text, text overflow, dots, ellipsis
Technical term:
Add dots if text is too long