Documentation Playground
Skip to content
Docs

Em

Marks text to stress emphasis.
We had to do something about it. 
<.text>
  We
  <.em>had</.em>
  to do something about it.
</.text>

API Reference

This component is based on the em element.

Prop Type Default Description
as_child boolean false Composes the component into its immediate child instead of rendering its own HTML element.
class string nil Additional CSS classes.
style string nil Additional inline styles.
truncate boolean — Whether to truncate text with ellipsis when it overflows.
wrap string — Text wrapping: one of wrap, nowrap, pretty, balance.
as_child Composes the component into its immediate child instead of rendering its own HTML element.
Type boolean Default false
class Additional CSS classes.
Type string Default nil
style Additional inline styles.
Type string Default nil
truncate Whether to truncate text with ellipsis when it overflows.
Type boolean Default —
wrap Text wrapping: one of wrap, nowrap, pretty, balance.
Type string Default —

Examples

Truncate

Use the truncate prop to truncate text with an ellipsis when it overflows its container.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. 
<.flex max_width="300px">
  <.em truncate>
    The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.
  </.em>
</.flex>
← Code Kbd →