Why Isn't My CSS `text-overflow: ellipsis;` Working?

CSS text-overflow: ellipsis; Not Working?

The CSS property "text-overflow: ellipsis;" truncates a string when its length exceeds the available space, replacing the truncated portion with an ellipsis (...) symbol. However, it may not always work as expected.

Conditions for Functionality:

For "text-overflow: ellipsis;" to function properly, the following conditions must be met:

• Pixel-constrained Width: The element's width must be specified in pixels (px). Width expressed as a percentage (%) will not activate the ellipsis effect.
• Constrained Overflow and White Space: The element must have both "overflow: hidden" and "white-space: nowrap" set.

Fixing the Issue:

In the provided code, the issue arises because the width of the "a" element is not constrained. Although a width is defined, the element is set to "display: inline" by default, which allows it to expand beyond its specified width.

To resolve this, you must constrain the element's width using one of the following methods:

• Set Display: Change the display property to "display: inline-block" or "display: block" to prevent the element from expanding beyond its specified width.
• Constrain Container Element: Specify "display: block" and a fixed width or max-width for one of the container elements of the "a" element.
• Float the Element: Apply "float: left" or "float: right" to the "a" element to confine its width.

The recommended solution is to set the display property to "display: inline-block," as it minimizes the potential impact on the current layout.

Revised Snippet:

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

The above is the detailed content of Why Isn't My CSS `text-overflow: ellipsis;` Working?. For more information, please follow other related articles on the PHP Chinese website!