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!