.copy-tooltip { position: absolute; top: -25px; left: 0; background: #333; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .copy-tooltip.visible { opacity: 1; } #share-dropdown img { width: 20px; height: 20px; }
This website is better experienced in landscape mode.
This site is best experienced in landscape.

Lists: Soft & hard returns

What do we mean by a hard return and a soft return?

Hard return: When typing if you press Enter this will create a hard return that starts a new paragraph.

Soft return: Pressing Shift + Enter will create a soft return that adds a new line which is still connected to the paragraph before.


But what happens when you do this in a numbered list or bullet list? A hard return will create a new bullet/number while a soft return will add a new line under the same bullet/number. In the case of the latter, soft returns can sometimes be useful to apply to a list if you have content for a point or step that needs spacing out.

Here's an example of a list with an extra warning on step 6. We've italicised it but it still doesn't really stand out very well.

Soft-Hard return in list example

Let's apply a hard and soft return just before the 'Warning' to see the difference:

Soft-Hard return in list example edit
With a hard return = becomes the next step With a soft return = continues step but on a new line
Hard return example Soft return example
Tooltip GIF