Text utilities - Utilities - Spectre.css CSS Framework
Author: Yan Zhu
Description: Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Text utilities#

Text utilities are used for text alignment, styles and overflow things.

    <!-- left-aligned text -->
    <div class="text-left"></div>
    <!-- center-aligned text -->
    <div class="text-center"></div>
    <!-- right-aligned text -->
    <div class="text-right"></div>
    <!-- justified text -->
    <div class="text-justify"></div>

    <!-- Lowercased text -->
    <div class="text-lowercase"></div>
    <!-- Uppercased text -->
    <div class="text-uppercase"></div>
    <!-- Capitalized text -->
    <div class="text-capitalize"></div>

    <!-- Normal weight text -->
    <div class="text-normal"></div>
    <!-- Bold text -->
    <div class="text-bold"></div>
    <!-- Italicized text -->
    <div class="text-italic"></div>
    <!-- Muted text -->
    <div class="text-muted"></div>
    <!-- Larger text (120%) -->
    <div class="text-large"></div>
    <!-- Smaller text (90%) -->
    <div class="text-small"></div>
    <!-- Tiny text (80%) -->
    <div class="text-tiny"></div>

    <!-- Overflow behavior: display an ellipsis to represent clipped text -->
    <div class="text-ellipsis"></div>
    <!-- Overflow behavior: truncate the text -->
    <div class="text-clip"></div>
    <!-- Text may be broken at arbitrary points -->
    <div class="text-break"></div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.