# Spangroup (lv_spangroup) (/widgets/spangroup)
Overview [#overview]
The Spangroup Widget is used to display rich text. Different
from the Label Widget, Spangroups can render text styled with
different fonts, colors, and sizes into the Spangroup Widget.
See example below.
A Spangroup contains 0 or more Span Descriptors ("Spans"). Each Span contains its
own text and style properties for that text. You add 1 Span (as a child) to the
Spangroup for each "span" of uniquely-styled text needed. Each Span so added is
appended to the end of the list. The list sequence determines the order in which the
Spans are displayed. Spans can be added to, and removed from, the Spangroup
throughout its life. The number of Spans that can be added is limited only by
available RAM.
Parts and Styles [#parts-and-styles]
* Spangroup has only one part.
Usage [#usage]
Set text and style [#set-text-and-style]
Add each needed Span to a Spangroup like this:
```c title=" " lineNumbers=1
lv_span_t * span = lv_spangroup_new_span(spangroup);
```
After a Span is created, use the following functions to set its text
and style properties:
*
*
Example of the latter: .
If the Spangroup Widget's `mode != LV_SPAN_MODE_FIXED` call
after you have modifying any of its
Spans to ensure it is redrawn appropriately.
Retrieving a Span child [#retrieving-a-span-child]
Spangroups store their children differently from normal Widgets, so
normal functions for getting children won't work.
will return a pointer to the
child Span at index `id`. In addition, `id` can be negative to index
from the end of the Spangroup where `-1` is the youngest child, `-2`
is second youngest, etc.
E.g. `lv_span_t * span = lv_spangroup_get_child(spangroup, 0)` will
return the first child of the Spangroup.
`lv_span_t * span = lv_spangroup_get_child(spangroup, -1)` will return
the last (or most recent) child.
Child count [#child-count]
Use to get
the number of contained Spans.
E.g. `uint32_t size = lv_spangroup_get_span_count(spangroup)`
Removing a Span [#removing-a-span]
You can remove a Span at any time during the Spangroup's life using the function
.
Text align [#text-align]
Like the Label Widget, a Spangroup can be set to one the following text-alignment modes:
* Align text to left.
* Center text.
* Align text to right edge.
* Align auto.
Use function
to set text alignment.
Modes [#modes]
**DEPRECATED**, set the width to or fixed value to control expanding/wrapping.
A Spangroup can be set to one the following modes:
* Fixes its size.
* Expand size to text size but stay on one line.
* Keep width; break lines that are too long and auto-expand height.
Use to set its mode.
Overflow [#overflow]
A Spangroup can be set to handle text overflow in one of the following ways:
* truncates text at the limit of the area.
* display an ellipsis (`...`) when text overflows the area.
Use to set
the Spangroup's overflow mode.
First line indent [#first-line-indent]
Use to set the indent of the
first line. All modes support pixel units. In addition,
and modes support percentage units as well
(e.g. `lv_pct(10)`).
Lines [#lines]
Use to set the maximum number
of lines to be displayed in mode. A negative
value indicates no limit.
Data binding [#data-binding]
To get familiar with observers, subjects, and data bindings in general, visit the
[Observer](/main-modules/observer/observer) page.
Very similar to Label-text binding, a Span's text can be bound to a subject as well.
The only difference is that in the bind function both the Spangroup and the Span need to be specified:
Note that before calling ,
needs to be called manually as LVGL can't remove the binding automatically.
Events [#events]
No special events are sent by Span Widgets.
Learn more about [Events](/common-widget-features/events) emitted by all Widgets.
Learn more about [events](/common-widget-features/events).
Keys [#keys]
No *Keys* are processed by Span Widgets.
Learn more about [Keys](/main-modules/indev/keypad).
Example [#example]
Span with custom styles [#span-with-custom-styles]
API [#api]