12 CSS Code Blocks 05 / 12
Horizontal Scroll & Word-Wrap Handling (Mobile Responsive)
Two stacked code blocks comparing approaches: one with <code>overflow-x: auto</code> (clean gradient scrollbar, single line stays on one row) versus <code>white-space: pre-wrap</code> (graceful wrapping for long URLs and identifiers).
Best fordocumentation that shows long API endpoints, file paths, package names, or hash strings where the reader needs to choose which trade-off fits their layout.
The code
<section class="ccb-rsp" aria-label="Horizontal scroll and word-wrap comparison demo">
<div class="ccb-rsp__wrap">
<div class="ccb-rsp__block ccb-rsp__scroll">
<div class="ccb-rsp__head">overflow-x: auto <span class="ccb-rsp__pill">scroll</span></div>
<pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// long line stays on one row → scrollbar appears</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&sort=popular&limit=50&include=author"</span>;</code></pre>
</div>
<div class="ccb-rsp__block ccb-rsp__wrapmode">
<div class="ccb-rsp__head">white-space: pre-wrap <span class="ccb-rsp__pill">wrap</span></div>
<pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// same line wraps gracefully on narrow screens</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&sort=popular&limit=50&include=author"</span>;</code></pre>
</div>
</div>
</section> <section class="ccb-rsp" aria-label="Horizontal scroll and word-wrap comparison demo">
<div class="ccb-rsp__wrap">
<div class="ccb-rsp__block ccb-rsp__scroll">
<div class="ccb-rsp__head">overflow-x: auto <span class="ccb-rsp__pill">scroll</span></div>
<pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// long line stays on one row → scrollbar appears</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&sort=popular&limit=50&include=author"</span>;</code></pre>
</div>
<div class="ccb-rsp__block ccb-rsp__wrapmode">
<div class="ccb-rsp__head">white-space: pre-wrap <span class="ccb-rsp__pill">wrap</span></div>
<pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// same line wraps gracefully on narrow screens</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&sort=popular&limit=50&include=author"</span>;</code></pre>
</div>
</div>
</section>/* ─── 05 Horizontal Scroll & Word-Wrap Handling ──────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Manrope:wght@400;600;800&display=swap');
.ccb-rsp {
--ccb-rsp-bg: #0e1216;
--ccb-rsp-panel: #151b21;
--ccb-rsp-ink: #e3e9ee;
--ccb-rsp-muted: #7d8893;
--ccb-rsp-accent: #fbbf24;
--ccb-rsp-line: rgba(255,255,255,.06);
width: 100%;
min-height: 360px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(680px 400px at 100% 100%, rgba(251,191,36,.08), transparent 55%),
var(--ccb-rsp-bg);
color: var(--ccb-rsp-ink);
font-family: 'Manrope', sans-serif;
padding: 32px 22px;
box-sizing: border-box;
}
.ccb-rsp *, .ccb-rsp *::before, .ccb-rsp *::after { box-sizing: border-box; }
.ccb-rsp__wrap { width: 100%; max-width: 580px; display: grid; gap: 18px; }
.ccb-rsp__block {
background: var(--ccb-rsp-panel);
border: 1px solid var(--ccb-rsp-line);
border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 56px -30px rgba(0,0,0,.8);
}
.ccb-rsp__head {
display: flex; align-items: center; gap: 10px;
padding: 11px 18px;
border-bottom: 1px solid var(--ccb-rsp-line);
font-family: 'Roboto Mono', monospace;
font-size: 12px; color: var(--ccb-rsp-muted); letter-spacing: .05em;
}
.ccb-rsp__pill {
margin-left: auto; font-size: 11px;
color: var(--ccb-rsp-accent);
border: 1px solid rgba(251,191,36,.3);
padding: 3px 10px; border-radius: 999px;
}
.ccb-rsp__pre {
margin: 0; padding: 18px 20px;
font-family: 'Roboto Mono', monospace;
font-size: 13px; line-height: 1.75;
color: #cbd5e0; max-width: 100%;
}
.ccb-rsp__scroll .ccb-rsp__pre { overflow-x: auto; white-space: pre; }
.ccb-rsp__wrapmode .ccb-rsp__pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar { height: 9px; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--ccb-rsp-accent), #f59e0b); border-radius: 9px; }
.ccb-rsp__k { color: #c792ea; }
.ccb-rsp__s { color: #c3e88d; }
.ccb-rsp__c { color: #5a6573; font-style: italic; } /* ─── 05 Horizontal Scroll & Word-Wrap Handling ──────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Manrope:wght@400;600;800&display=swap');
.ccb-rsp {
--ccb-rsp-bg: #0e1216;
--ccb-rsp-panel: #151b21;
--ccb-rsp-ink: #e3e9ee;
--ccb-rsp-muted: #7d8893;
--ccb-rsp-accent: #fbbf24;
--ccb-rsp-line: rgba(255,255,255,.06);
width: 100%;
min-height: 360px;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(680px 400px at 100% 100%, rgba(251,191,36,.08), transparent 55%),
var(--ccb-rsp-bg);
color: var(--ccb-rsp-ink);
font-family: 'Manrope', sans-serif;
padding: 32px 22px;
box-sizing: border-box;
}
.ccb-rsp *, .ccb-rsp *::before, .ccb-rsp *::after { box-sizing: border-box; }
.ccb-rsp__wrap { width: 100%; max-width: 580px; display: grid; gap: 18px; }
.ccb-rsp__block {
background: var(--ccb-rsp-panel);
border: 1px solid var(--ccb-rsp-line);
border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 56px -30px rgba(0,0,0,.8);
}
.ccb-rsp__head {
display: flex; align-items: center; gap: 10px;
padding: 11px 18px;
border-bottom: 1px solid var(--ccb-rsp-line);
font-family: 'Roboto Mono', monospace;
font-size: 12px; color: var(--ccb-rsp-muted); letter-spacing: .05em;
}
.ccb-rsp__pill {
margin-left: auto; font-size: 11px;
color: var(--ccb-rsp-accent);
border: 1px solid rgba(251,191,36,.3);
padding: 3px 10px; border-radius: 999px;
}
.ccb-rsp__pre {
margin: 0; padding: 18px 20px;
font-family: 'Roboto Mono', monospace;
font-size: 13px; line-height: 1.75;
color: #cbd5e0; max-width: 100%;
}
.ccb-rsp__scroll .ccb-rsp__pre { overflow-x: auto; white-space: pre; }
.ccb-rsp__wrapmode .ccb-rsp__pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar { height: 9px; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--ccb-rsp-accent), #f59e0b); border-radius: 9px; }
.ccb-rsp__k { color: #c792ea; }
.ccb-rsp__s { color: #c3e88d; }
.ccb-rsp__c { color: #5a6573; font-style: italic; }More from 12 CSS Code Blocks
Neumorphic Embedded Code BoxSplit-Pane Code + Live Preview ContainerMinimalist Light Mode / Editorial ThemeExpandable / Collapsible Code WrapperCode Block with Copy to Clipboard ButtonMinimalist Dark Mode Code BoxMac-Style Window ContainerCode Container with Line Numbers and Filename HeaderGlow-Effect & Neon Tech Code BlockGlassmorphism Code TerminalInline Code Snippet Pill Styling
View the full collection →