CSS Text Wrap Banner with Long Strings — Live CSS Playground

{CF} CodeFronts Back to CSS Banners & Alerts CSS Text Wrap Banner with Long Strings Pure CSS

HTML

<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&amp;region=us-east&amp;fallback=true&amp;cache=immutable&amp;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&amp;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&amp;timezone=America%2FNew_York&amp;format=json&amp;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>

CSS

/* ─── 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; } }