# CSS: “text-overflow”: X is not a “text-overflow” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-text-overflow-x-is-not-a-text-overflow-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `text-overflow` CSS property controls how overflowed content that is not displayed is signaled to users. It applies when an element's overflow is hidden (e.g., `overflow: hidden`) and the content exceeds the element's box. The property accepts specific values, and using anything outside the allowed set — such as a misspelled keyword, an unquoted string, or a made-up value — will trigger this validation error.

### Accepted values

The `text-overflow` property accepts the following values:

- **`clip`** — Truncates the text at the edge of the content area. Characters may be clipped mid-glyph. This is the default.
- **`ellipsis`** — Displays an ellipsis character (`…`) to indicate clipped text.
- **A custom `<string>`** — A quoted string to display at the clipping point (e.g., `" [..]"`). Note that browser support for custom strings is limited.
- **Global CSS values** — `inherit`, `initial`, `revert`, `revert-layer`, and `unset`.

The property can take one or two values. If one value is given, it specifies the overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first controls the left end of the line and the second controls the right end. Two-value syntax has limited browser support.

Common mistakes that trigger this error include:

- Misspelling `ellipsis` (e.g., `elipsis`, `ellipses`).
- Using a value from a different property (e.g., `hidden`, `scroll`, `auto`).
- Using an unquoted custom string instead of a properly quoted one.
- Using a numeric or length value (e.g., `10px`), which is not valid for this property.

### Why this matters

Invalid CSS values are ignored by browsers, which means the property will fall back to its default (`clip`) instead of behaving as you intended. This can lead to text being abruptly cut off without any visual indicator, harming readability and user experience. Fixing validation errors also ensures your stylesheets are clean, predictable, and maintainable.

## Examples

### Incorrect — misspelled keyword

```css
/* "elipsis" is not a valid text-overflow value */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: elipsis;
}
```

### Incorrect — value from another property

```css
/* "hidden" is an overflow value, not a text-overflow value */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: hidden;
}
```

### Incorrect — unquoted custom string

```css
/* Custom strings must be quoted */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: [more];
}
```

### Correct — using `ellipsis`

```css
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

### Correct — using `clip` (the default)

```css
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
```

### Correct — using a quoted custom string

```css
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: " [..]";
}
```

### Correct — two-value syntax

```css
/* Left end uses ellipsis, right end uses a custom string */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis " [..]";
}
```

Note that `text-overflow` on its own does not force overflow to occur. To make text actually truncate, you typically need `overflow: hidden` (or another non-visible overflow value) and `white-space: nowrap` on the element. The `text-overflow` property only controls *how* the clipped content is signaled visually.