CSS Text Styling
Text styling properties control the visual presentation of inline text content. While font properties determine the typeface, text properties govern alignment, decoration, spacing, transformation, wrapping, and overflow behavior. Together they form the typographic toolkit for readable and expressive interfaces.
This guide covers all CSS text-related properties with a focus on practical terminal-theme applications — from basic alignment to advanced effects like text overflow ellipsis, multi-line clamping, and terminal cursor effects.
| 1 | .terminal-text { |
| 2 | color: #E0E0E0; |
| 3 | font-family: "SF Mono", Menlo, monospace; |
| 4 | font-size: 13px; |
| 5 | line-height: 1.5; |
| 6 | letter-spacing: 0; |
| 7 | } |
text-aligncontrols the horizontal alignment of inline content within its block container. The default depends on the document's writing direction (left for LTR, right for RTL).
| 1 | .left { text-align: left; } /* default for LTR */ |
| 2 | .right { text-align: right; } |
| 3 | .center { text-align: center; } |
| 4 | .justify { text-align: justify; } /* stretches lines to fill width */ |
| 5 | |
| 6 | /* Terminal-specific */ |
| 7 | .terminal-left { text-align: left; } |
| 8 | .terminal-right { text-align: right; } /* for status/meta */ |
| 9 | .terminal-center { text-align: center; } /* for headings */ |
| 10 | |
| 11 | /* Match parent direction */ |
| 12 | .auto-align { text-align: start; } /* left in LTR, right in RTL */ |
| 13 | .end-align { text-align: end; } /* right in LTR, left in RTL */ |
The text-decoration shorthand and its sub-properties give fine control over decorative lines on text. Modern CSS supports underline offset, thickness, style, color, and skip-ink behavior.
| 1 | /* Shorthand values */ |
| 2 | .underline { text-decoration: underline; } |
| 3 | .overline { text-decoration: overline; } |
| 4 | .line-through { text-decoration: line-through; } |
| 5 | .none { text-decoration: none; } |
| 6 | |
| 7 | /* Sub-properties for fine control */ |
| 8 | .fancy { |
| 9 | text-decoration-line: underline; |
| 10 | text-decoration-style: wavy; |
| 11 | text-decoration-color: #00FF41; |
| 12 | text-decoration-thickness: 2px; |
| 13 | text-underline-offset: 4px; |
| 14 | text-decoration-skip-ink: auto; |
| 15 | } |
| 16 | |
| 17 | /* Terminal-style underline */ |
| 18 | .terminal-link { |
| 19 | color: #00FF41; |
| 20 | text-decoration: underline; |
| 21 | text-decoration-color: rgba(0, 255, 65, 0.4); |
| 22 | text-underline-offset: 3px; |
| 23 | text-decoration-thickness: 1px; |
| 24 | } |
| 25 | |
| 26 | /* Multiple decorations */ |
| 27 | .both { |
| 28 | text-decoration: underline overline; |
| 29 | text-decoration-color: #FFB000; |
| 30 | } |
text-transform changes the capitalization of text without altering the underlying content. This is a presentational change only — screen readers read the original text.
| 1 | .uppercase { |
| 2 | text-transform: uppercase; |
| 3 | letter-spacing: 0.08em; /* improves uppercase readability */ |
| 4 | } |
| 5 | |
| 6 | .lowercase { |
| 7 | text-transform: lowercase; |
| 8 | } |
| 9 | |
| 10 | .capitalize { |
| 11 | text-transform: capitalize; /* capitalizes first letter of each word */ |
| 12 | } |
| 13 | |
| 14 | /* Terminal use cases */ |
| 15 | .terminal-command { |
| 16 | text-transform: lowercase; |
| 17 | font-family: monospace; |
| 18 | } |
| 19 | |
| 20 | .terminal-label { |
| 21 | text-transform: uppercase; |
| 22 | letter-spacing: 0.12em; |
| 23 | font-size: 10px; |
| 24 | color: #525252; |
| 25 | } |
| 26 | |
| 27 | .terminal-heading { |
| 28 | text-transform: uppercase; |
| 29 | letter-spacing: 0.05em; |
| 30 | color: #00FF41; |
| 31 | } |
text-indent specifies the indentation of the first line of a block of text. It accepts lengths, percentages, and negative values for hanging indents.
| 1 | .indent { |
| 2 | text-indent: 2em; /* first line indented by 2 character widths */ |
| 3 | } |
| 4 | |
| 5 | .hanging { |
| 6 | text-indent: -2em; /* hanging indent */ |
| 7 | padding-left: 2em; /* compensate for negative indent */ |
| 8 | } |
| 9 | |
| 10 | /* No indent on first paragraph after heading */ |
| 11 | h2 + p, h3 + p { |
| 12 | text-indent: 0; |
| 13 | } |
| 14 | |
| 15 | /* Terminal: continuation lines */ |
| 16 | .terminal-continuation { |
| 17 | text-indent: -2ch; |
| 18 | padding-left: 2ch; |
| 19 | color: #808080; |
| 20 | } |
text-shadow adds drop shadows to text with the syntax: offset-x offset-y blur-radius color. Multiple shadows can be layered for glow effects and depth.
| 1 | /* Simple shadow */ |
| 2 | .simple { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } |
| 3 | |
| 4 | /* Terminal green glow */ |
| 5 | .glow { |
| 6 | text-shadow: 0 0 8px rgba(0, 255, 65, 0.5); |
| 7 | } |
| 8 | |
| 9 | /* Layered neon */ |
| 10 | .neon { |
| 11 | text-shadow: |
| 12 | 0 0 4px #00FF41, |
| 13 | 0 0 11px #00FF41, |
| 14 | 0 0 19px #00FF41, |
| 15 | 0 0 40px rgba(0, 255, 65, 0.3); |
| 16 | } |
| 17 | |
| 18 | /* Hard shadow — retro terminal */ |
| 19 | .retro { text-shadow: 3px 3px 0 #00FF41; } |
| 20 | |
| 21 | /* No shadow */ |
| 22 | .none { text-shadow: none; } |
| 23 | |
| 24 | /* Emboss */ |
| 25 | .emboss { |
| 26 | color: #0D0D0D; |
| 27 | text-shadow: |
| 28 | 1px 1px 0 rgba(255,255,255,0.1), |
| 29 | -1px -1px 0 rgba(0,0,0,0.5); |
| 30 | } |
| 31 | |
| 32 | /* Long shadow */ |
| 33 | .long { |
| 34 | text-shadow: |
| 35 | 1px 1px 0 #0D0D0D, |
| 36 | 2px 2px 0 #0D0D0D, |
| 37 | 3px 3px 0 #0D0D0D, |
| 38 | 4px 4px 0 #0D0D0D; |
| 39 | } |
letter-spacing (tracking) controls the horizontal space between characters. Small adjustments significantly impact readability and tone. Positive values open the text; negative values tighten it.
| 1 | .tight { letter-spacing: -0.03em; } /* modern headings */ |
| 2 | .normal { letter-spacing: normal; } /* 0 */ |
| 3 | .expanded { letter-spacing: 0.05em; } |
| 4 | .uppercase { letter-spacing: 0.08em; } /* common for all-caps */ |
| 5 | .wide { letter-spacing: 0.15em; } |
| 6 | .monospace { letter-spacing: 0; } /* default for monospace */ |
| 7 | |
| 8 | /* Terminal: status bar */ |
| 9 | .terminal-status { |
| 10 | font-size: 10px; |
| 11 | letter-spacing: 0.1em; |
| 12 | text-transform: uppercase; |
| 13 | color: #525252; |
| 14 | } |
| 15 | |
| 16 | /* Terminal: heading */ |
| 17 | .terminal-heading { |
| 18 | letter-spacing: -0.02em; |
| 19 | color: #E0E0E0; |
| 20 | font-weight: 700; |
| 21 | } |
| 22 | |
| 23 | /* Hover effect */ |
| 24 | .interactive:hover { |
| 25 | letter-spacing: 0.1em; |
| 26 | transition: letter-spacing 0.3s; |
| 27 | } |
word-spacing controls the space between words. Unlike letter-spacing which affects individual characters, this property affects the inter-word gap.
| 1 | .normal { word-spacing: normal; } /* 0 */ |
| 2 | .expanded-words { word-spacing: 0.25em; } |
| 3 | .compact-words { word-spacing: -0.05em; } |
| 4 | |
| 5 | /* Combined with letter-spacing for readability */ |
| 6 | .meta-text { |
| 7 | text-transform: uppercase; |
| 8 | font-size: 0.75rem; |
| 9 | letter-spacing: 0.1em; |
| 10 | word-spacing: 0.15em; |
| 11 | } |
line-height controls the vertical space between lines. Unitless values are recommended because they are relative to font-size and work correctly with inheritance. Terminal UIs typically use tighter line heights (1.3-1.5).
| 1 | /* Unitless (recommended) */ |
| 2 | .tight { line-height: 1.15; } /* headings */ |
| 3 | .terminal { line-height: 1.4; } /* terminal output */ |
| 4 | .normal { line-height: 1.5; } /* body text (default) */ |
| 5 | .roomy { line-height: 1.7; } /* extended readability */ |
| 6 | |
| 7 | /* Length values (avoid) */ |
| 8 | .pixels { line-height: 24px; } /* fixed — does not scale */ |
| 9 | |
| 10 | /* Terminal: code blocks */ |
| 11 | .terminal-code { |
| 12 | font-family: "SF Mono", Menlo, monospace; |
| 13 | font-size: 13px; |
| 14 | line-height: 1.5; |
| 15 | } |
| 16 | |
| 17 | /* Terminal: compact output */ |
| 18 | .terminal-output { |
| 19 | font-family: "SF Mono", Menlo, monospace; |
| 20 | font-size: 12px; |
| 21 | line-height: 1.3; |
| 22 | } |
white-space controls how whitespace and line breaks are handled inside an element. This is critical for displaying code, preserving formatting, and controlling text wrapping behavior.
| 1 | .normal { white-space: normal; } /* collapse, wrap */ |
| 2 | .nowrap { white-space: nowrap; } /* collapse, no wrap */ |
| 3 | .pre { white-space: pre; } /* preserve, no wrap */ |
| 4 | .pre-wrap { white-space: pre-wrap; } /* preserve, wraps */ |
| 5 | .pre-line { white-space: pre-line; } /* collapse, preserve \n */ |
| 6 | .break-spaces { white-space: break-spaces; } /* preserve all spaces, wrap */ |
| 7 | |
| 8 | /* Terminal: command output */ |
| 9 | .terminal-output { |
| 10 | white-space: pre-wrap; /* preserve formatting, wrap long lines */ |
| 11 | font-family: monospace; |
| 12 | } |
| 13 | |
| 14 | /* Terminal: one-line status */ |
| 15 | .terminal-status { |
| 16 | white-space: nowrap; |
| 17 | overflow: hidden; |
| 18 | text-overflow: ellipsis; |
| 19 | } |
| 20 | |
| 21 | /* Terminal: error messages */ |
| 22 | .terminal-error { |
| 23 | white-space: pre; /* preserve exact formatting */ |
| 24 | font-family: monospace; |
| 25 | color: #EF4444; |
| 26 | } |
| 27 | |
| 28 | /* Code block */ |
| 29 | .code-block { |
| 30 | white-space: pre-wrap; |
| 31 | word-break: break-word; |
| 32 | } |
These properties control how text breaks when it exceeds its container. overflow-wrap breaks words only when necessary; word-break can break at any character.
| 1 | /* overflow-wrap */ |
| 2 | .normal { overflow-wrap: normal; } /* default — only breaks at spaces */ |
| 3 | .break-word { overflow-wrap: break-word; } /* break long words if needed */ |
| 4 | .anywhere { overflow-wrap: anywhere; } /* break at any point */ |
| 5 | |
| 6 | /* word-break */ |
| 7 | .normal { word-break: normal; } /* default */ |
| 8 | .break-all { word-break: break-all; } /* break at any char */ |
| 9 | .keep-all { word-break: keep-all; } /* no CJK breaks */ |
| 10 | .break-word-legacy { word-break: break-word; } /* legacy */ |
| 11 | |
| 12 | /* hyphens */ |
| 13 | .hyphenate { hyphens: auto; } /* auto-hyphenation */ |
| 14 | .no-hyphen { hyphens: none; } |
| 15 | .manual { hyphens: manual; } /* manual hyphenation */ |
| 16 | |
| 17 | /* Terminal: long paths */ |
| 18 | .terminal-path { |
| 19 | overflow-wrap: break-word; |
| 20 | word-break: break-all; |
| 21 | font-family: monospace; |
| 22 | font-size: 12px; |
| 23 | } |
text-overflow controls how overflowed text is signaled to users. The most common use is ellipsis to truncate with "...". Requires overflow: hidden and white-space: nowrap.
| 1 | /* Single-line truncation */ |
| 2 | .truncate { |
| 3 | white-space: nowrap; |
| 4 | overflow: hidden; |
| 5 | text-overflow: ellipsis; |
| 6 | } |
| 7 | |
| 8 | /* Clip (default) */ |
| 9 | .clip { |
| 10 | white-space: nowrap; |
| 11 | overflow: hidden; |
| 12 | text-overflow: clip; |
| 13 | } |
| 14 | |
| 15 | /* Custom string (Firefox only) */ |
| 16 | .custom { |
| 17 | white-space: nowrap; |
| 18 | overflow: hidden; |
| 19 | text-overflow: ">"; |
| 20 | } |
| 21 | |
| 22 | /* Multi-line clamp */ |
| 23 | .clamp-2 { |
| 24 | display: -webkit-box; |
| 25 | -webkit-line-clamp: 2; |
| 26 | -webkit-box-orient: vertical; |
| 27 | overflow: hidden; |
| 28 | } |
| 29 | |
| 30 | .clamp-3 { |
| 31 | display: -webkit-box; |
| 32 | -webkit-line-clamp: 3; |
| 33 | -webkit-box-orient: vertical; |
| 34 | overflow: hidden; |
| 35 | } |
| 36 | |
| 37 | /* Terminal: file paths */ |
| 38 | .terminal-path-truncate { |
| 39 | white-space: nowrap; |
| 40 | overflow: hidden; |
| 41 | text-overflow: ellipsis; |
| 42 | font-family: monospace; |
| 43 | max-width: 300px; |
| 44 | direction: rtl; /* show end of path */ |
| 45 | text-align: left; |
| 46 | } |
CSS supports multiple writing modes through writing-mode (horizontal vs vertical text) and direction (LTR vs RTL). These are critical for internationalization and creative layouts.
| 1 | /* direction */ |
| 2 | .ltr { direction: ltr; } /* left-to-right (default for English) */ |
| 3 | .rtl { direction: rtl; } /* right-to-left (Arabic, Hebrew) */ |
| 4 | |
| 5 | /* writing-mode */ |
| 6 | .horizontal-tb { writing-mode: horizontal-tb; } /* default */ |
| 7 | .vertical-rl { writing-mode: vertical-rl; } /* vertical, right to left */ |
| 8 | .vertical-lr { writing-mode: vertical-lr; } /* vertical, left to right */ |
| 9 | |
| 10 | /* text-orientation (for vertical text) */ |
| 11 | .mixed { text-orientation: mixed; } /* default — rotated 90deg */ |
| 12 | .upright { text-orientation: upright; } /* upright characters */ |
| 13 | |
| 14 | /* Unicode-bidi */ |
| 15 | .override { unicode-bidi: bidi-override; } /* forces direction */ |
Practical text styling patterns for terminal-themed UIs: cursor blink, typing animation, selection styling, and status indicators.
| 1 | /* Text selection in terminal style */ |
| 2 | ::selection { |
| 3 | background: rgba(0, 255, 65, 0.3); |
| 4 | color: #E0E0E0; |
| 5 | } |
| 6 | |
| 7 | /* Terminal cursor blink */ |
| 8 | @keyframes blink { |
| 9 | 0%, 50% { opacity: 1; } |
| 10 | 51%, 100% { opacity: 0; } |
| 11 | } |
| 12 | |
| 13 | .cursor { |
| 14 | display: inline-block; |
| 15 | width: 8px; |
| 16 | height: 1em; |
| 17 | background: #00FF41; |
| 18 | animation: blink 1s step-end infinite; |
| 19 | vertical-align: text-bottom; |
| 20 | margin-left: 2px; |
| 21 | } |
| 22 | |
| 23 | /* Terminal typing effect */ |
| 24 | @keyframes typing { |
| 25 | from { width: 0; } |
| 26 | to { width: 100%; } |
| 27 | } |
| 28 | |
| 29 | .typing-text { |
| 30 | overflow: hidden; |
| 31 | white-space: nowrap; |
| 32 | animation: typing 3s steps(40, end); |
| 33 | display: inline-block; |
| 34 | } |
| 35 | |
| 36 | /* Status indicators */ |
| 37 | .status-success { color: #00FF41; } |
| 38 | .status-error { color: #EF4444; } |
| 39 | .status-warning { color: #FFB000; } |
| 40 | .status-info { color: #3B82F6; } |
| 41 | .status-muted { color: #525252; } |
| 42 | |
| 43 | /* Prompt styling */ |
| 44 | .terminal-prompt::before { |
| 45 | content: "$ "; |
| 46 | color: #00FF41; |
| 47 | font-weight: bold; |
| 48 | } |
| 49 | |
| 50 | .terminal-prompt-root::before { |
| 51 | content: "# "; |
| 52 | color: #EF4444; |
| 53 | font-weight: bold; |
| 54 | } |
pro tip