Back to updates
Feature
Designer

White space property added to control text wrapping

We added a new advanced text styling option (from the “white-space” CSS property) that lets you control how text flows within an element of a fixed width.

White space property added to control text wrapping

<p>If you’ve ever run into a situation where you have a fixed width element containing text, you might have noticed that you don’t have control over how that text flows within the element (by default, the text wraps to the next line).</p><p>For the technically inclined, the reason why this happens is because of the <a href="<https://developer.mozilla.org/en-US/docs/Web/CSS/white-space>">CSS property “white-space,”</a> which, by default, is set to “normal”, and which, before today, you had no ability to control. With today’s change, the new “breaking” property in the typography section of the style panel lets you change this property for yourself, controlling how that text breaks.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:901px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="901px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c9c3S1gh1i5aZnF-oyxRJhV16B6N1EbNJKXtMCzHmhaAVVte9Z9JUWwAmq3XU8rYXBmXVrVdOfJ8Xgk3Pd6Uxb5Tzb07Lx-TWcJJII-pLArqYzYZ5a6u8gKrJYbDIjfwPsIP9s7mQa.gif>"></div><figcaption>The new “breaking” property in action.</figcaption></figure><p>In addition to the most straightforward option of “no wrap,” we’ve included all the other CSS options as well for the pros out there. To learn more about what each of these options enable, check out the <a href="<https://developer.mozilla.org/en-US/docs/Web/CSS/white-space>">interactive example in Mozilla’s documentation</a>.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1053px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1053px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c9bcuXTYASiTvL-mMioCgP6i6PsESvO6KvSnlPYOVz59jcbHFI05xwC5G6JACbGtCDBmqGSyxlod0pTMhHB4XivYPPZh5DCY9mjcWCyDFuIGgGJPumVY9OQdLrik7cp6clPwHKfJ.gif>"></div><figcaption>For a closer look at what the different white space options do, check out the interactive demo in Mozilla’s documentation.</figcaption></figure><p>‍<br></p>


Launched on
August 22, 2019
Category
Designer

Related updates

Custom tooltips for component props

Custom tooltips for component props

Learn more
Shared Libraries available on all paid Workspace plans

Shared Libraries available on all paid Workspace plans

Learn more
Introducing Webflow Interactions, powered by GSAP

Introducing Webflow Interactions, powered by GSAP

Learn more
Rename elements and component instances

Rename elements and component instances

Learn more
Advanced variables with functions

Advanced variables with functions

Learn more
See recently modified classes in the style selector

See recently modified classes in the style selector

Learn more