CSS Text Overflow

• Purpose: The text-overflow property controls how text that is too long to fit within its container is handled.
• Syntax: element { text-overflow: value; }
• element: The HTML element you want to style (e.g., p, span, div).
• Values:
  • clip: (Default) Text that overflows the container is clipped (hidden).
  • ellipsis: Displays an ellipsis (…) at the end of the text to indicate that it has been truncated.
  • initial: Sets the property to its default value (clip).
  • inherit: Inherits the value of the text-overflow property from the parent element.
• Example:

<div class="container">
   This is a very long line of text that may overflow.
</div>
<style>
  .container {
     width: 200px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
   }
</style>

• The .container has a fixed width of 200px.
• overflow: hidden; prevents the text from overflowing outside the container.
• text-overflow: ellipsis; displays an ellipsis (…) at the end of the text if it overflows.
• white-space: nowrap; prevents line breaks within the container, ensuring that the text stays on a single line.