Inline Text Formatting

Inline text formatting options give you the power to style any part of the text differently from the rest of the text. Select text from any text element, like a paragraph or heading, and you can bold, italicize, link, or simply style that selected text.  

Formatting text

To format inline text, double-click on any text element. This will allow you to select the text inside. You’ll also notice that a text formatting bar has appeared above your text element. The text formatting bar gives you the following options:

  • Bold
  • Italic
  • Insert Link
  • Wrap with Span
  • Clear formatting

Now, you can highlight any text inside the text element and click on the formatting option(s) from the text formatting bar.

Inline text formatting in Webflow
Rich texts have a different inline text formatting bar. Learn more.

Styling inline text

Applying any inline text formatting on a selection, creates a nested element inside of your main text element. You can select any of these nested elements and style them further using the Styles Panel.

Nested styles in Webflow

You can apply multiple formats on the same selection. For example you can bold and italicize the same word. As you add and modify these style values, the text stays inline within the paragraph element.

Bolding and italicizing text

Bold wraps your selection in an important text element and gives it a default style of bold font weight. Although you can style this nested element by creating a class, you may choose to style the All Strong tag to change the default styling of all important text across your site.

Inline text formattin in Webflow

To style the All Strong tag:

  1. Select the important text element
  2. Go to the Styles Panel
  3. Click into the selector field
  4. Choose the All Strong tag
  5. Adjust the styling

Italic wraps your selection in an emphasized text element and gives it a default style of italics. Again, you can style this nested element by creating a class, or you can choose to style the All Ems tag to change the default styling of all emphasized text in your site. 

Inline text formattin in Webflow

To style the All Ems tag:

  1. Select the emphasized text element
  2. Go to the Styles Panel
  3. Click into the selector field
  4. Choose the All Ems tag
  5. Adjust the styling
If your font doesn't have a bold font weight or italics versions, then the browser will generate a version for both which may not render well.

Inserting an inline link

Insert Link transforms the selection into a text link. You can then select this link and set up your link settings from the Settings Panel.

Inline text formattin in Webflow

By default, the link will inherit its styles from the All Links tag. Learn more about styling tags. You can also style this link as you please by adding a class.

Wrapping a text in span to style it further

You may use the inline styles to quickly bold or italicize a selection without further styling the selected text. However, you may want to add other styles to your text. For example, you may want to underline a phrase or create a highlight effect by adding a background. The Wrap with Span option wraps the selected text in an element that can be styled using any of the properties in the Styles Panel. You can create a class and apply it to multiple span elements as well.

Inline text formattin in Webflow

Example - Underline text

Usually, you would define the text decoration property on a selected word or phrase in a paragraph. To do this:

  1. Double-click to edit the paragraph
  2. Select the text you want to underline
  3. Select the Wrap with Span option
  4. Make sure the text span is selected
  5. Add the underline text decoration property in the Style Panel
 

Removing  formatting

You can clear any of these custom formattings by:

  1. Double-clicking the text element
  2. Selecting the formatted text
  3. Clicking on clear formatting
Inline text formattin in Webflow

You can select the formatted texts individually or select the entire paragraph and clear all formatting with one click. Clear formatting will remove inline styles, spans, and links.

You can also remove individual formats for inline styles and links by clicking on any blue icon which indicates, which of these formats is applied.

Non-breaking space

When using paragraphs, sometimes, you may notice that one word is left as an orphan on the last line. You can link words together while preserving the space by using a non-breaking space. A non-breaking space creates a space between words that cannot be broken by word wrap. To add a non-breaking space, press Shift + Space when adding spaces between words you want to keep together.

Be careful when using manual breaks or non-breaking spaces. It may solve a text issue on larger screens but may cause other issues on smaller screens.