Streaming live at 10am (PST)

Discovered a cool little trick: non-breaking spaces

Just wanted to share this super easy but perhaps useful little trick using non-breaking spaces in Webflow.

You know how when you write code you can add strings containing blank spaces to separate values? Something along these lines:

let animal = 'fox'
let adjective = 'quick'
console.log('This is a picture of a ' + adjective + ' ' + animal)
// .......................Note the blank space here ^^^
// >> This is a picture of a quick fox

There is a way to do this in Webflow as well. Instead of adding a space by simply pressing Space (which results in the space being removed when the page renders), hit Shift + Space and the space will be preserved.

There is a nice use case for this. Suppose you are populating some elements of your blog post with data from your CMS like this:

Instead of trying to approximate correct spacing with left and right margins, you can use Shift + Space. This is nice because the spaces will be consistent throughout, and they will also grow/shrink proportionately as you change the size/spacing of the font. This is a less error-prone way to build a responsive layout than using em/rem units to estimate those spaces.

Here is a Webflow article that documents this feature, albeit for a different use scenario.

Hope this was useful!

6 Likes