Richtext is used to achieve inline <span>
or <a>
combined with inline-block <image>
. It also supports nested <span>
, <image>
and <a>
with style inheritance and override. Thus, richtext can be considered as a more general <text>
with more powerful usage.
Only <span>
, <a>
and <image>
are valid children of <richtext>
. <span>
and <a>
are considered as display:inline
, while <image>
is considered as display:inline-block
, which are default values and cannot be changed.
Children of <richtext>
can be classified as two types of node, internal and external.
<span>
and <a>
are internal nodes, while <image>
is external node.Richtext can be seen as a tree, and the max height of the tree is 255. Any style on a node of which the height is greater than 255 has no effect.
Notes
<a>
on iOS will have a color:blue
style, and children of <a>
can not override this style. This only happens on iOS. There is no default style and override restriction for <a>
on Android.<image>
in richtext must have width
and height
styles.<image>
will remain blank until the corresponding image is downloaded and there is no way to display a placeholder image.Supported attributes of children of a richtext
.
<span>
does not support any attribute. A text must be set as the content of <span>
, e.g. <span>Hello World</span>
.
Only limited css styles listed below are supported by richtext.
<span>
, <a>
and <richtext>
itself<span>
<richtext>
<image>
img
and span
:img
tag:a
tag when the img
tag is clicked.a
tag instead.span
tag:span
tag is clicked whose parent is an a
tag.a
tag has a pseudo-ref
property whose value will be sent with the itemclick event.