SymbolFYI

Ellipsis

Typography
Definição

A single character (…, U+2026) representing three dots, preferred over typing three periods.

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 -->
&hellip;

<!-- Hex entity -->
&#x2026;

<!-- Decimal entity -->
&#8230;

<!-- 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&hellip;</button>
<button>Export&hellip;</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...

Símbolos relacionados

Termos relacionados

Ferramentas relacionadas

Guias relacionados