The browser effectively performs a binary search for the smallest width which doesn't cause any additional lines, stopping at one CSS pixel (not display pixel). # A brief explanation of the technique the browser is using For example, headings inside of a card (or any container with borders or shadows).īalanced text wrapping ironically creates imbalance to the contained element. Because of this, there's a few scenarios where text-wrap: balance isn't that great, at least in my opinion. See how the width shown from DevTools has a bunch of extra space at the end? That's because it's a wrapping style only, not a size changing style. text-wrap: balance does not have this effect and can be seen in this example: This has an added bonus of being "shrink wrapped" to the balanced block. There's an advantage to some of the JavaScript solutions for balanced text wrapping, as they change the max-width of the containing element itself. unbalanced # Balancing won’t change the inline-size of the element This is why we see headline wrapping as in the following image: Try a demo. All the variables needed for an effective and aesthetic treatment of text wrapping, are in the browser. The best options available being to use or to help guide text layouts into smarter decisions about where to break lines and words.Īs a developer, you don’t know the final size, font size, or even language of a headline or paragraph. Without text-wrap: balance designers, content editors and publishers have few tools to change the way lines are balanced. To check it out, enable chrome://flags/#enable-experimental-web-platform-features, and then take a look at the examples in this post to learn how this one line of CSS can massively improve your text layouts. Chrome Canary includes a new feature- text-wrap: balance from CSS Text Level 4.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |