Style any part of a text differently from the rest of the text with 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.
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:
Now, you can highlight any text inside the text element and click on the formatting option(s) from the text formatting bar.
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.
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.
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.
To style the All Strong tag:
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.
To style the All Ems tag:
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.
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.
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.
Usually, you would define the text decoration property on a selected word or phrase in a paragraph. To do this:
You can clear any of these custom formattings by:
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.
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.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback