or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-timing.mdborder-utilities.mdbrowser-support.mdcolor-functions.mdform-input-selectors.mdindex.mdlayout-positioning.mdmathematical-utilities.mdshapes-graphics.mdtext-content.mdtypography.md
tile.json

text-content.mddocs/

Text and Content

Text manipulation utilities for truncation, accessibility, and content handling including ellipsis truncation, text hiding techniques, and cross-browser text wrapping.

Capabilities

Ellipsis Mixin

Truncates text and adds an ellipsis to represent overflow with configurable width and display properties.

/**
 * Truncates text with ellipsis for overflow
 * @param $width - Maximum width before truncation (default: 100%)
 * @param $display - Display value for the element (default: inline-block)
 */
@mixin ellipsis($width: 100%, $display: inline-block);

Usage Examples:

.truncated-title {
  @include ellipsis(200px);
}
// Result:
// display: inline-block;
// max-width: 200px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;

.card-title {
  @include ellipsis(100%, block);
}

.sidebar-item {
  @include ellipsis(150px, block);
  font-size: 14px;
}

Hide Text Mixin

Hides text content in an element while preserving layout, commonly used for image replacement techniques.

/**
 * Hides text in an element for image replacement
 */
@mixin hide-text;

Usage Examples:

.logo {
  @include hide-text;
  background: url('logo.png') no-repeat;
  width: 200px;
  height: 60px;
}
// Result:
// color: transparent;
// font: 0/0 a;
// text-shadow: none;

.icon-button {
  @include hide-text;
  background: url('icon.svg') center no-repeat;
  @include size(40px);
}

Hide Visually Mixin

Hides an element visually while keeping content accessible to screen readers and assistive technology.

/**
 * Hides element visually while keeping accessible to screen readers
 * @param $toggle - "hide" to hide, "unhide" to restore visibility (default: "hide")
 */
@mixin hide-visually($toggle: "hide");

Usage Examples:

.sr-only {
  @include hide-visually;
}
// Result:
// border: 0;
// clip: rect(1px, 1px, 1px, 1px);
// height: 1px;
// overflow: hidden;
// padding: 0;
// position: absolute;
// width: 1px;

.accessible-label {
  @include hide-visually;
}

// Restore visibility
.show-on-focus {
  @include hide-visually;
  
  &:focus {
    @include hide-visually("unhide");
  }
}
// When "unhide" is used:
// clip: auto;
// height: auto;
// overflow: visible;
// position: static;
// width: auto;

Overflow Wrap Mixin

Outputs overflow-wrap property with legacy word-wrap fallback for cross-browser text wrapping support.

/**
 * Cross-browser text wrapping with legacy support
 * @param $wrap - Wrapping behavior (default: break-word)
 *               Options: normal, break-word, inherit, initial, unset
 */
@mixin overflow-wrap($wrap: break-word);

Usage Examples:

.long-text {
  @include overflow-wrap;
}
// Result:
// word-wrap: break-word;
// overflow-wrap: break-word;

.preserve-words {
  @include overflow-wrap(normal);
}

.code-block {
  @include overflow-wrap(break-word);
  font-family: monospace;
  white-space: pre-wrap;
}

Complete Text Handling Examples

Card Component with Text Controls

.card {
  .card-title {
    @include ellipsis(100%, block);
    font-weight: bold;
    margin-bottom: 8px;
  }
  
  .card-description {
    @include overflow-wrap;
    line-height: 1.4;
  }
  
  .card-metadata {
    .sr-only {
      @include hide-visually;
    }
  }
}

Navigation with Accessible Labels

.nav-item {
  .nav-link {
    display: block;
    padding: 12px 16px;
    
    .icon {
      @include hide-text;
      background: url('nav-icon.svg') center no-repeat;
      @include size(20px);
      display: inline-block;
      vertical-align: middle;
    }
    
    .label {
      @include hide-visually;
      
      @media (min-width: 768px) {
        @include hide-visually("unhide");
        margin-left: 8px;
      }
    }
  }
}

Content Truncation Patterns

// Single-line truncation
.single-line {
  @include ellipsis(300px);
}

// Multi-line truncation (CSS-only fallback)
.multi-line {
  @include overflow-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// Responsive truncation
.responsive-truncate {
  @include ellipsis(200px);
  
  @media (min-width: 768px) {
    @include ellipsis(400px);
  }
  
  @media (min-width: 1024px) {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

Accessible Form Labels

.form-group {
  .label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
  }
  
  .label-required {
    @include hide-visually;
  }
  
  .input {
    @include overflow-wrap;
    width: 100%;
    padding: 8px 12px;
  }
  
  .help-text {
    font-size: 12px;
    color: #666;
    @include overflow-wrap;
  }
}