CSS Ellipsis

Definition and Purpose:

CSS ellipsis is a text-overflow attribute that allows developers to truncate overflowing text and show an ellipsis (...) to signal that the content has been cut off. The ellipsis is a three-dot sequence, often representing the absence of additional text. CSS ellipsis' principal purpose is to handle instances where the space for displaying text is restricted, preventing content from breaking the layout or overflowing outside its container.

Explanation of How CSS Ellipsis is Used to Truncate Text

CSS ellipsis can display an ellipsis after visible text when text overflows its container, and there is insufficient space to display the complete content. This truncation approach is frequently employed in situations such as:

Single-Line Text: When a single-line text, such as a heading or a label, is longer than the container's width, CSS ellipsis guarantees that the text is truncated at the end with an ellipsis, preventing the layout from breaking or creating horizontal scrolling.
Multi-Line Text: When multi-line text, such as paragraph content or descriptions, exceeds the height of the container, CSS ellipsis can be used to truncate the text with an ellipsis, suggesting that there is more content beyond what is currently shown.

Importance of CSS Ellipsis in Maintaining a Clean and Visually Appealing Layout

CSS ellipsis is essential for maintaining a clean and visually pleasing layout, especially with limited text display space. Its importance can be found in the following aspects:

Preventing Text overflow: When text space is limited, ellipsis guarantees that text does not overrun its container, avoiding layout interruptions or unintentional overlaps with other elements.
Focus on Critical Information: By truncating long text with an ellipsis, viewers can concentrate on the most important part of the message. It serves as a visual indicator that more information is accessible, prompting users to interact with the material if they want to see more.
Improving Readability: By displaying an ellipsis at the moment of truncation, users are alerted that the text has been cut off, preventing confusion or misunderstanding due to incomplete information.
Responsive Design Support: CSS ellipsis is especially useful in responsive web design since restricted space is typical on small displays or narrow containers. It guarantees that text remains manageable and legible across various devices.

Implementing CSS Ellipsis

Overview of the CSS Properties Involved in Implementing Ellipsis

Three main CSS properties are used to achieve CSS ellipsis and truncate text that overflows its container:

White space: This attribute governs how white spaces (spaces, tabs, and line breaks) are handled inside the text. It has an impact on how text wraps and breaks within a container.

Values: normal, nowrap, pre, pre-wrap, pre-line.

Overflow: This attribute governs how material that exceeds the container's bounds is displayed. It decides whether scrollbars are displayed, if the content is cropped, or whether it is concealed.

Values: visible, hidden, scroll, auto.

Text-overflow: This property determines how an ellipsis is displayed when text is truncated when it deals with text overflow.

Values: clip, ellipsis.

Examples of Using Each Property Individually and in Combination to Create Ellipsis Effects

Example: Implementing ellipsis with text-overflow.

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden; /* Hides overflowing content */
  text-overflow: ellipsis; /* Displays ellipsis (...) at the end of the truncated text */
}

Example: Using white space and overflow.

.container {
  width: 200px;
  white-space: nowrap; 
  overflow: hidden; /* Hides overflowing content*/
}

Example: Combining All Properties

.container {
  width: 200px;
  white-space: nowrap; 
  overflow: hidden; /* Hides overflowing content */
}

.container p {
  margin: 0; /* Remove the paragraph's default margins. */
}

.container p span {
  display: inline-block;
  width: 100%; /* This ensures that the span fills the entire container width. */
  text-overflow: ellipsis; /* Displays ellipsis (...) at the end of the truncated text. */
  overflow: hidden; /* Hides any overflowing content.*/
  white-space: nowrap; /* Prevents text from wrapping within the span */
}

We integrate all three features in the third case. We may apply the text-overflow: ellipsis property specifically to the span by utilizing a nested span element inside the container's p element, allowing the ellipsis effect to apply exclusively to a specific section of the text within the container. This technique can be handy when truncating text within a certain element while leaving other material within the container unchanged.

Handling Multi-Line Text

Using CSS ellipsis to handle multi-line text is more difficult than single-line text. There are techniques to use CSS to create ellipsis effects on multi-line text.

One of the popular methods involves using -webkit-line-clamp for WebKit-based browsers (e.g., Chrome and Safari) and display: -webkit-box in combination with text-overflow: ellipsis.

When the content exceeds the container's capacity, this technique permits a specified number of lines of text with an ellipsis.

Example 1: Using display: -webkit-box for Multi-Line Ellipsis (Cross-Browser Approach)

.container {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
  max-height: 3.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Additional styles*/
.container p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

In this example, we set the .container element's max height to around three lines of text (assuming 1.5cm for each line). We achieve a similar multi-line ellipsis effect for other browsers by using display: -webkit-box, -webkit-box-orient, and text-overflow: ellipsis, but the outcome may differ significantly.

Note: The number of lines displayed before truncation may vary significantly depending on the font, line height, and browser rendering.

Example 2: Using -webkit-line-clamp for Multi-Line Ellipsis

.container {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show before truncation */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Additional styles */
.container p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

In the example above, a p element in the .container element contains multi-line text. We restrict the display to three lines of text by using -webkit-line-clamp and -webkit-box-orient, and we apply overflow: hidden to conceal any information that extends past the designated lines. If there is further material, this produces a multi-line ellipsis effect that displays an ellipsis (...) at the end of the third line.

Note: Remember that -webkit-line-clamp is a 'proprietary property' that only functions in browsers that support WebKit.

Customizing Ellipsis Styling

The ellipsis can be styled differently in CSS, which enables designers to produce a more aesthetically pleasing and unified design. Developers can customize the ellipsis to better fit the overall theme of the website or application by changing variables such as the ellipsis character, color, and spacing.

The Following are Some Ellipsis Styling Customization Options:

Example 1: Changing the color of the ellipsis:

Make the ellipsis' color fit the color scheme of your website.

.container {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ff8800; /* Set custom color for the ellipsis */
}

Example 2: Changing the character in the ellipsis

Three dots are frequently used as the standard ellipsis symbol (...). To better fit the typography and appearance of your website, you can swap it out for another character like "..." or the Unicode ellipsis (...).

/* Unicode ellipsis is used to create a custom ellipsis character. */
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Example 3: Adding Spacing Around the Ellipsis:

To improve the ellipsis' visual appearance and distinguish it from the text, put padding or margin around it.

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px; /* Add padding */
}

Example 4: Using Pseudo-Elements for Customising Ellipsis:

More visual freedom can be achieved by styling the ellipsis with pseudo-elements like as::before or::after.

.container {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.container::after {
  content: "..."; 
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: yellow; /* Background color for the ellipsis */
}