CSS Banners & Alerts 14 / 14
CSS Text Wrap Banner with Long Strings
A CSS text-wrap banner demo in a developer terminal / GitHub-dark aesthetic — rendered as a real terminal window (traffic-light dots, title bar) with syntax-highlighted error log lines, side-by-side comparison of broken (truncated, <code>white-space: nowrap</code>) vs fixed (<code>overflow-wrap: break-word</code> applied) vs scrollable alternatives.
Best fordeveloper documentation, status pages, error log UIs, terminal-style displays.
The code
<section class="ba-twp" aria-label="Text wrap banner demo">
<div class="terminal">
<div class="terminal-bar" aria-hidden="true">
<span class="term-dot term-dot--close"></span>
<span class="term-dot term-dot--min"></span>
<span class="term-dot term-dot--full"></span>
<span class="term-title">system-log — error.log — 128×38</span>
</div>
<div class="alerts">
<div class="term-section">✓ correct — overflow-wrap applied</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">1</span>
<span class="alert-prefix dot-err" aria-hidden="true">✖</span>
<div class="alert-message"><div class="alert-text"><strong class="err">ERR_CERT_AUTHORITY_INVALID</strong> Failed to fetch resource at:<br><span class="path">https://cdn.staging.acme-corp-internal.vercel.app/assets/fonts/GregorianDisplay-ExtraBold-VF-v4.2.1-webfont.woff2?v=1729472910&region=us-east&fallback=true&cache=immutable&host=edge</span></div></div>
</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">2</span>
<span class="alert-prefix dot-err" aria-hidden="true">✖</span>
<div class="alert-message"><div class="alert-text"><strong class="err">TypeError:</strong> Cannot read properties of undefined (reading 'map') at <span class="path">/home/runner/work/monorepo/packages/ui/src/components/DataGrid/VirtualizedRows/RowRenderer.tsx:148:22</span></div></div>
</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">3</span>
<span class="alert-prefix dot-warn" aria-hidden="true">⚠</span>
<div class="alert-message"><div class="alert-text"><strong class="warn">ENV_PARSE_ERROR</strong> Malformed value in <span class="path">.env.production</span>:<br><span class="key">DATABASE_URL</span>=<span class="val">postgres://admin:s3cr3tP@ssw0rd!2024@db-primary-replica-cluster.us-east-1.rds.amazonaws.com:5432/production_db_v3?sslmode=require&connect_timeout=10</span></div></div>
</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">4</span>
<span class="alert-prefix dot-info" aria-hidden="true">ℹ</span>
<div class="alert-message"><div class="alert-text"><strong>JWT_DECODE_FAILURE</strong> Token received from <span class="path">Authorization: Bearer</span> header could not be verified:<br><span class="val">eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InByaW1hcnkta2V5LTIwMjQtMDYifQ.eyJzdWIiOiJ1c3ItOTkxMjM0NTY3ODkwYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXoiLCJpYXQiOjE3MjA0ODAwMDB9.INVALID</span></div></div>
</div>
<div class="term-section">✕ comparison — no overflow-wrap (truncated)</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">5</span>
<span class="alert-prefix dot-err" aria-hidden="true">✖</span>
<div class="alert-message alert-message--broken"><div class="alert-text"><strong class="err">ERR_CERT:</strong> https://cdn.staging.acme-corp-internal.vercel.app/assets/fonts/GregorianDisplay-ExtraBold-VF-v4.2.1-webfont.woff2?v=1729472910</div></div>
</div>
<div class="term-section">~ scrollable — white-space: nowrap + overflow-x: auto</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">6</span>
<span class="alert-prefix dot-info" aria-hidden="true">ℹ</span>
<div class="alert-message alert-message--broken-scroll"><div class="alert-text"><span class="key">TRACE</span> <span class="path">GET /api/v3/internal/users/usr-9912345/preferences/notifications/email/digest?locale=en-US&timezone=America%2FNew_York&format=json&include_archived=true</span> <span class="val">→ 200</span> <span class="warn">in 1423ms</span></div></div>
</div>
<div class="term-section">// the fix — CSS rules</div>
<div class="code-block">
<span class="cline"><span class="c-selector">.banner-message</span> {</span>
<span class="cline"> <span class="c-property">min-width</span>: <span class="c-value">0</span>; <span class="c-comment">/* allow flex child to shrink */</span></span>
<span class="cline"> <span class="c-property">overflow-wrap</span>: <span class="c-value">break-word</span>; <span class="c-comment">/* break long tokens */</span></span>
<span class="cline"> <span class="c-property">word-break</span>: <span class="c-value">break-word</span>; <span class="c-comment">/* legacy alias */</span></span>
<span class="cline"> <span class="c-property">white-space</span>: <span class="c-value">pre-wrap</span>; <span class="c-comment">/* preserve \n, wrap normally */</span></span>
<span class="cline"> <span class="c-property">hyphens</span>: <span class="c-value">auto</span>; <span class="c-comment">/* optional: soft hyphens */</span></span>
<span class="cline">}</span>
</div>
</div>
</div>
</section> <section class="ba-twp" aria-label="Text wrap banner demo">
<div class="terminal">
<div class="terminal-bar" aria-hidden="true">
<span class="term-dot term-dot--close"></span>
<span class="term-dot term-dot--min"></span>
<span class="term-dot term-dot--full"></span>
<span class="term-title">system-log — error.log — 128×38</span>
</div>
<div class="alerts">
<div class="term-section">✓ correct — overflow-wrap applied</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">1</span>
<span class="alert-prefix dot-err" aria-hidden="true">✖</span>
<div class="alert-message"><div class="alert-text"><strong class="err">ERR_CERT_AUTHORITY_INVALID</strong> Failed to fetch resource at:<br><span class="path">https://cdn.staging.acme-corp-internal.vercel.app/assets/fonts/GregorianDisplay-ExtraBold-VF-v4.2.1-webfont.woff2?v=1729472910&region=us-east&fallback=true&cache=immutable&host=edge</span></div></div>
</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">2</span>
<span class="alert-prefix dot-err" aria-hidden="true">✖</span>
<div class="alert-message"><div class="alert-text"><strong class="err">TypeError:</strong> Cannot read properties of undefined (reading 'map') at <span class="path">/home/runner/work/monorepo/packages/ui/src/components/DataGrid/VirtualizedRows/RowRenderer.tsx:148:22</span></div></div>
</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">3</span>
<span class="alert-prefix dot-warn" aria-hidden="true">⚠</span>
<div class="alert-message"><div class="alert-text"><strong class="warn">ENV_PARSE_ERROR</strong> Malformed value in <span class="path">.env.production</span>:<br><span class="key">DATABASE_URL</span>=<span class="val">postgres://admin:s3cr3tP@ssw0rd!2024@db-primary-replica-cluster.us-east-1.rds.amazonaws.com:5432/production_db_v3?sslmode=require&connect_timeout=10</span></div></div>
</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">4</span>
<span class="alert-prefix dot-info" aria-hidden="true">ℹ</span>
<div class="alert-message"><div class="alert-text"><strong>JWT_DECODE_FAILURE</strong> Token received from <span class="path">Authorization: Bearer</span> header could not be verified:<br><span class="val">eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InByaW1hcnkta2V5LTIwMjQtMDYifQ.eyJzdWIiOiJ1c3ItOTkxMjM0NTY3ODkwYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXoiLCJpYXQiOjE3MjA0ODAwMDB9.INVALID</span></div></div>
</div>
<div class="term-section">✕ comparison — no overflow-wrap (truncated)</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">5</span>
<span class="alert-prefix dot-err" aria-hidden="true">✖</span>
<div class="alert-message alert-message--broken"><div class="alert-text"><strong class="err">ERR_CERT:</strong> https://cdn.staging.acme-corp-internal.vercel.app/assets/fonts/GregorianDisplay-ExtraBold-VF-v4.2.1-webfont.woff2?v=1729472910</div></div>
</div>
<div class="term-section">~ scrollable — white-space: nowrap + overflow-x: auto</div>
<div class="alert-row">
<span class="line-num" aria-hidden="true">6</span>
<span class="alert-prefix dot-info" aria-hidden="true">ℹ</span>
<div class="alert-message alert-message--broken-scroll"><div class="alert-text"><span class="key">TRACE</span> <span class="path">GET /api/v3/internal/users/usr-9912345/preferences/notifications/email/digest?locale=en-US&timezone=America%2FNew_York&format=json&include_archived=true</span> <span class="val">→ 200</span> <span class="warn">in 1423ms</span></div></div>
</div>
<div class="term-section">// the fix — CSS rules</div>
<div class="code-block">
<span class="cline"><span class="c-selector">.banner-message</span> {</span>
<span class="cline"> <span class="c-property">min-width</span>: <span class="c-value">0</span>; <span class="c-comment">/* allow flex child to shrink */</span></span>
<span class="cline"> <span class="c-property">overflow-wrap</span>: <span class="c-value">break-word</span>; <span class="c-comment">/* break long tokens */</span></span>
<span class="cline"> <span class="c-property">word-break</span>: <span class="c-value">break-word</span>; <span class="c-comment">/* legacy alias */</span></span>
<span class="cline"> <span class="c-property">white-space</span>: <span class="c-value">pre-wrap</span>; <span class="c-comment">/* preserve \n, wrap normally */</span></span>
<span class="cline"> <span class="c-property">hyphens</span>: <span class="c-value">auto</span>; <span class="c-comment">/* optional: soft hyphens */</span></span>
<span class="cline">}</span>
</div>
</div>
</div>
</section>/* ─── 14 Text Wrap Banner with Long Strings — terminal ───────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Sora:wght@400;600;700&display=swap');
.ba-twp {
--ba-twp-bg: #0f1117;
--ba-twp-surface: #161b22;
--ba-twp-surface-2: #1c2128;
--ba-twp-border: rgba(255,255,255,0.08);
--ba-twp-text: #e6edf3;
--ba-twp-muted: rgba(230,237,243,0.5);
--ba-twp-green: #3fb950;
--ba-twp-red: #f85149;
--ba-twp-amber: #d29922;
--ba-twp-blue: #58a6ff;
--ba-twp-purple: #d2a8ff;
position: relative;
width: 100%;
min-height: 720px;
background: var(--ba-twp-bg);
background-image: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(88,166,255,0.06) 0%, transparent 60%);
font-family: 'JetBrains Mono', monospace;
color: var(--ba-twp-text);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 48px 16px;
box-sizing: border-box;
}
.ba-twp *, .ba-twp *::before, .ba-twp *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-twp .terminal { width: 100%; max-width: 760px; background: var(--ba-twp-surface); border: 1px solid var(--ba-twp-border); border-radius: 10px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); animation: ba-twp-up 0.5s ease both; }
@keyframes ba-twp-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ba-twp .terminal-bar { background: var(--ba-twp-surface-2); border-bottom: 1px solid var(--ba-twp-border); padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.ba-twp .term-dot { width: 12px; height: 12px; border-radius: 50%; }
.ba-twp .term-dot--close { background: #ff5f57; } .ba-twp .term-dot--min { background: #ffbd2e; } .ba-twp .term-dot--full { background: #28c840; }
.ba-twp .term-title { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.35); letter-spacing: 0.06em; margin-right: 36px; }
.ba-twp .alerts { padding: 0; display: flex; flex-direction: column; }
.ba-twp .term-section { background: var(--ba-twp-bg); border-bottom: 1px solid var(--ba-twp-border); padding: 8px 20px; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.2); display: flex; align-items: center; gap: 10px; }
.ba-twp .term-section::after { content: ''; flex: 1; height: 1px; background: var(--ba-twp-border); }
.ba-twp .alert-row { border-bottom: 1px solid var(--ba-twp-border); padding: 14px 20px; position: relative; display: flex; align-items: flex-start; gap: 12px; transition: background 0.15s; }
.ba-twp .alert-row:last-child { border-bottom: none; }
.ba-twp .alert-row:hover { background: rgba(255,255,255,0.02); }
.ba-twp .alert-message { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ba-twp .alert-message--broken { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-twp .alert-message--broken-scroll { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
.ba-twp .alert-prefix { flex-shrink: 0; font-size: 11.5px; font-weight: 700; white-space: nowrap; padding-top: 1px; }
.ba-twp .alert-text { font-size: 12.5px; font-weight: 400; line-height: 1.7; color: var(--ba-twp-muted); }
.ba-twp .alert-text strong { font-weight: 700; color: var(--ba-twp-text); }
.ba-twp .path { color: var(--ba-twp-blue); font-weight: 500; }
.ba-twp .val { color: var(--ba-twp-green); }
.ba-twp .err { color: var(--ba-twp-red); }
.ba-twp .warn { color: var(--ba-twp-amber); }
.ba-twp .key { color: var(--ba-twp-purple); }
.ba-twp .line-num { flex-shrink: 0; font-size: 10px; color: rgba(255,255,255,0.18); user-select: none; padding-top: 2px; min-width: 20px; text-align: right; }
.ba-twp .dot-err { color: var(--ba-twp-red); } .ba-twp .dot-ok { color: var(--ba-twp-green); } .ba-twp .dot-warn { color: var(--ba-twp-amber); } .ba-twp .dot-info { color: var(--ba-twp-blue); }
.ba-twp .code-block { background: var(--ba-twp-bg); border: 1px solid var(--ba-twp-border); border-radius: 6px; padding: 14px 18px; margin: 12px 20px; font-size: 12px; line-height: 1.8; color: var(--ba-twp-muted); counter-reset: cline; }
.ba-twp .cline { display: block; counter-increment: cline; padding-left: 32px; position: relative; }
.ba-twp .cline::before { content: counter(cline); position: absolute; left: 0; width: 24px; text-align: right; color: rgba(255,255,255,0.15); font-size: 11px; user-select: none; }
.ba-twp .c-selector { color: #79c0ff; }
.ba-twp .c-property { color: #d2a8ff; }
.ba-twp .c-value { color: #a5d6ff; }
.ba-twp .c-comment { color: rgba(255,255,255,0.25); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .ba-twp .terminal { animation: none; } } /* ─── 14 Text Wrap Banner with Long Strings — terminal ───────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Sora:wght@400;600;700&display=swap');
.ba-twp {
--ba-twp-bg: #0f1117;
--ba-twp-surface: #161b22;
--ba-twp-surface-2: #1c2128;
--ba-twp-border: rgba(255,255,255,0.08);
--ba-twp-text: #e6edf3;
--ba-twp-muted: rgba(230,237,243,0.5);
--ba-twp-green: #3fb950;
--ba-twp-red: #f85149;
--ba-twp-amber: #d29922;
--ba-twp-blue: #58a6ff;
--ba-twp-purple: #d2a8ff;
position: relative;
width: 100%;
min-height: 720px;
background: var(--ba-twp-bg);
background-image: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(88,166,255,0.06) 0%, transparent 60%);
font-family: 'JetBrains Mono', monospace;
color: var(--ba-twp-text);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 48px 16px;
box-sizing: border-box;
}
.ba-twp *, .ba-twp *::before, .ba-twp *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-twp .terminal { width: 100%; max-width: 760px; background: var(--ba-twp-surface); border: 1px solid var(--ba-twp-border); border-radius: 10px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); animation: ba-twp-up 0.5s ease both; }
@keyframes ba-twp-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ba-twp .terminal-bar { background: var(--ba-twp-surface-2); border-bottom: 1px solid var(--ba-twp-border); padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.ba-twp .term-dot { width: 12px; height: 12px; border-radius: 50%; }
.ba-twp .term-dot--close { background: #ff5f57; } .ba-twp .term-dot--min { background: #ffbd2e; } .ba-twp .term-dot--full { background: #28c840; }
.ba-twp .term-title { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.35); letter-spacing: 0.06em; margin-right: 36px; }
.ba-twp .alerts { padding: 0; display: flex; flex-direction: column; }
.ba-twp .term-section { background: var(--ba-twp-bg); border-bottom: 1px solid var(--ba-twp-border); padding: 8px 20px; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.2); display: flex; align-items: center; gap: 10px; }
.ba-twp .term-section::after { content: ''; flex: 1; height: 1px; background: var(--ba-twp-border); }
.ba-twp .alert-row { border-bottom: 1px solid var(--ba-twp-border); padding: 14px 20px; position: relative; display: flex; align-items: flex-start; gap: 12px; transition: background 0.15s; }
.ba-twp .alert-row:last-child { border-bottom: none; }
.ba-twp .alert-row:hover { background: rgba(255,255,255,0.02); }
.ba-twp .alert-message { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ba-twp .alert-message--broken { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-twp .alert-message--broken-scroll { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
.ba-twp .alert-prefix { flex-shrink: 0; font-size: 11.5px; font-weight: 700; white-space: nowrap; padding-top: 1px; }
.ba-twp .alert-text { font-size: 12.5px; font-weight: 400; line-height: 1.7; color: var(--ba-twp-muted); }
.ba-twp .alert-text strong { font-weight: 700; color: var(--ba-twp-text); }
.ba-twp .path { color: var(--ba-twp-blue); font-weight: 500; }
.ba-twp .val { color: var(--ba-twp-green); }
.ba-twp .err { color: var(--ba-twp-red); }
.ba-twp .warn { color: var(--ba-twp-amber); }
.ba-twp .key { color: var(--ba-twp-purple); }
.ba-twp .line-num { flex-shrink: 0; font-size: 10px; color: rgba(255,255,255,0.18); user-select: none; padding-top: 2px; min-width: 20px; text-align: right; }
.ba-twp .dot-err { color: var(--ba-twp-red); } .ba-twp .dot-ok { color: var(--ba-twp-green); } .ba-twp .dot-warn { color: var(--ba-twp-amber); } .ba-twp .dot-info { color: var(--ba-twp-blue); }
.ba-twp .code-block { background: var(--ba-twp-bg); border: 1px solid var(--ba-twp-border); border-radius: 6px; padding: 14px 18px; margin: 12px 20px; font-size: 12px; line-height: 1.8; color: var(--ba-twp-muted); counter-reset: cline; }
.ba-twp .cline { display: block; counter-increment: cline; padding-left: 32px; position: relative; }
.ba-twp .cline::before { content: counter(cline); position: absolute; left: 0; width: 24px; text-align: right; color: rgba(255,255,255,0.15); font-size: 11px; user-select: none; }
.ba-twp .c-selector { color: #79c0ff; }
.ba-twp .c-property { color: #d2a8ff; }
.ba-twp .c-value { color: #a5d6ff; }
.ba-twp .c-comment { color: rgba(255,255,255,0.25); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .ba-twp .terminal { animation: none; } }More from CSS Banners & Alerts
Semantic Bootstrap-style Alerts CSSInline Form Validation Alert CSSCSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS AlertResponsive Full Width Hero Banner CSSMaterial Design Floating Alert CardDismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Cookie Consent Banner BottomCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash Background
View the full collection →