Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
overflow

6 Articles
{
,

}
Direct link to the article Using Flexbox and text ellipsis together
ellipsis overflow text-overflow

Using Flexbox and text ellipsis together

Direct Link

You can truncate a single line of text with an ellipsis (…) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want …

Avatar of Chris Coyier
Shared by Chris Coyier on Jul 21, 2020
Direct link to the article A “new direction” in the struggle against rightward scrolling
direction overflow rtl sticky

A “new direction” in the struggle against rightward scrolling

Direct Link

You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the …

Avatar of Chris Coyier
Shared by Chris Coyier on May 21, 2020
Direct link to the article Overflow And Data Loss In CSS
flexbox grid overflow

Overflow And Data Loss In CSS

Direct Link

“Data Loss” is a funny term. My brain thinks of it like packet loss on the way from the server to your browser, resulting in missing content in files. Perhaps it is that on some level, but in CSS parlance, …

Avatar of Chris Coyier
Shared by Chris Coyier on Sep 17, 2019
Direct link to the article overscroll-behavior
overflow

overscroll-behavior

The overscroll-behavior property in CSS controls whether an element will use “scroll chaining” or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside …

Avatar of Chris Coyier
Chris Coyier on Mar 18, 2019
block formatting context flow-root overflow

display: flow-root;

Direct Link

News to me! There is a spec for it and Firefox says they intend to ship it. It’s just like display: block; only:

It always establishes a new block formatting context for its contents.

.group {
  display: flow-root;
}

Meaning: …

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 26, 2017
overflow overflow-wrap text wrapping word-break

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

There are times when a really long string of text can overflow the container of a layout.

For example:

URL’s don’t typically have spaces in them, so they are often culprits.

Here’s a big snippet with all the CSS players …

Avatar of Chris Coyier
Chris Coyier on Jul 25, 2018
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top