How to Use CSS to Show Text in One Line with Ellipsis

Are you tired of your text overflowing onto multiple lines and ruining your design? The CSS property, text-overflow: ellipsis, can help you show your text in one line with an ellipsis at the end to indicate that there is more text that has been truncated.

CSS CODE

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

HTML CODE

<div class="text_one_line" style="width:200px">
  <p>Here is some text that should be truncated if it exceeds the width of the container.</p>
</div>

The overflow: hidden property ensures that any text that exceeds the width of the container is not visible.

white-space: nowrap ensures that the text does not wrap to the next line.

text-overflow: ellipsis adds an ellipsis at the end of the line to indicate that there is more text that has been truncated.