Overflow to left instead of right
Override the default rightward overflow using direction: rtl; on the parent container, then reset the inside content flow with direction: ltr;. Follow this example:
Note: Make sure width of your container is set in a way to activate the overflow.
In-depth discussion
By default, overflowing content veers to the right, often as if they're late for a GitHub commit. Here we change course and head left, solely using CSS. Let's break it down.
The 'direction' property dance
The direction property manipulates text flow within a container:
direction: rtl;: You've guessed it, right-to-left.direction: ltr;: And, left-to-right (default).
When the container is set to direction: rtl;, new characters prefer the left side like a moth to light, giving us the desired leftward overflow.
Two-div-olution
A double-div approach gives more control:
- Define the outer div with the desired overflow behavior and width.
- Play with the inner div's float or direction property to adjust how added content behaves. Just like a DJ spinning records, making people move left-to-right or right-to-left.
The tale of two divs
The outer div behaves like a mask, defining how much and in which direction content can overflow. It's your bouncer at the club door, controlling the overflow traffic.
The inner div holds your display content and defines its flow direction. It's the crowd controller inside the club, guiding people to the dance floor (or table seats if they've spent more).
Displaying specific content
This is handy when you, for instance, want a phone number to overflow towards the left. Place it in the inner div and watch it follow your CSS commands like a well-trained GitHub bot.
Potential gotchas
Different browsers might treat overflow differently. Cross-browser testing is crucial, like trying to find the best IDE. Also, ensure your text does not contain unexpected bidirectional content as it might boogie bangaru awkwardly with the direction property.
Was this article helpful?