The ellipsis character is a single Unicode code point at U+2026, formally named HORIZONTAL ELLIPSIS. It represents the typographic convention of three dots used to indicate omitted text, a trailing thought, or a pause. Using the single ellipsis character rather than three separate periods (...) is the typographically correct approach and has practical advantages for line breaking and rendering.
Why Use the Unicode Ellipsis
Three period characters and the ellipsis character look similar but behave differently:
- Spacing: The single ellipsis character has carefully designed inter-dot spacing built into the font glyph, typically closer together than three periods
- Line breaking: A line break can occur between any of the three separate periods, potentially splitting them awkwardly across lines; the single ellipsis character is atomic and never splits
- Semantics: The single character is unambiguous -- it cannot be mistaken for sentence-ending punctuation
- Length: Three periods have length 3; the ellipsis character has length 1 -- relevant for text truncation logic
HTML and CSS Usage
<!-- Named entity -->
…
<!-- Hex entity -->
…
<!-- Decimal entity -->
…
<!-- Direct insertion -->
<p>The investigation continued...</p>
/* CSS text truncation with ellipsis -- uses a visual trailing ... */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Multi-line truncation (webkit) */
.truncate-multiline {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* text-overflow: ellipsis renders the ellipsis character visually;
it does not insert it into the DOM */
JavaScript Text Truncation
// Truncate with proper ellipsis character
function truncate(str, maxLength) {
if (str.length <= maxLength) return str;
return str.slice(0, maxLength - 1) + '\u2026'; // single ellipsis char
}
// Avoid: using '...' adds 3 characters, not 1
function truncateBad(str, maxLength) {
return str.slice(0, maxLength - 3) + '...'; // three separate periods
}
// When truncating at word boundary
function truncateWords(str, maxLength) {
if (str.length <= maxLength) return str;
const truncated = str.slice(0, maxLength).replace(/\s\S*$/, '');
return truncated + '\u2026';
}
Ellipsis in User Interfaces
In UI design, ellipsis has a secondary convention: a button or menu item labeled with trailing ellipsis (e.g., "Save As...", "Preferences...") signals that the action will open a dialog requiring further input before completing.
<!-- Desktop app convention: ... means "will show a dialog" -->
<button>Save As…</button>
<button>Export…</button>
Vertical and Midline Variants
Unicode also provides:
U+22EE VERTICAL ELLIPSIS
U+22EF MIDLINE HORIZONTAL ELLIPSIS
U+22F0 UP RIGHT DIAGONAL ELLIPSIS
U+22F1 DOWN RIGHT DIAGONAL ELLIPSIS
U+FE19 PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS
The vertical ellipsis (U+22EE) is commonly used in mobile UI to indicate a menu button (often called a "kebab menu") and in mathematics to indicate continuation in a column.
Spacing Conventions
Style guides differ on spacing around the ellipsis:
- Chicago Manual of Style: spaces before and after in most contexts
- AP Stylebook: spaces in quoted material, no space when trailing
- Most digital/web contexts: no spaces for trailing ellipsis -- Loading...