Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Em

Marks text to stress emphasis.

use radix_yew_themes::{Em, Text}; use yew::prelude::*; #[function_component] pub fn EmExample() -> Html { html! { <Text> {"We "}<Em>{"had"}</Em>{" to do something about it."} </Text> } }

API Reference

This component is based on the em element and supports common margin props.

PropTypeDefault
as_childOption<Callback<EmChildProps>>-
truncateOption<bool>-
wrapOption<Responsive<TextWrap>>-

Examples

Truncate

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

use radix_yew_themes::{Em, Flex}; use yew::prelude::*; #[function_component] pub fn EmTruncateExample() -> Html { html! { <Flex max_width="300px"> <Em truncate=true> {"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> } }

See Also