diff --git a/docs/widgets/extra/span.md b/docs/widgets/extra/span.md
index 94b481938..f48afcc87 100644
--- a/docs/widgets/extra/span.md
+++ b/docs/widgets/extra/span.md
@@ -56,7 +56,7 @@ The spangroup can be set to one the following modes:
 Use `lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_CLIP)` to set object overflow mode.
 
 ### first line indent
-Use `lv_spangroup_set_indent(spangroup, 20)` to set the indent of the first line, in pixels.
+Use `lv_spangroup_set_indent(spangroup, 20)` to set the indent of the first line. all modes support pixel units, in addition to LV_SPAN_MODE_FIXED and LV_SPAN_MODE_BREAK mode supports percentage units too.
 
 ## Events
 No special events are sent by this widget. 
diff --git a/src/extra/widgets/span/lv_span.c b/src/extra/widgets/span/lv_span.c
index dbb13688e..c0f7012d7 100644
--- a/src/extra/widgets/span/lv_span.c
+++ b/src/extra/widgets/span/lv_span.c
@@ -62,6 +62,7 @@ static void lv_snippet_clear(void);
 static uint16_t lv_get_snippet_cnt(void);
 static void lv_snippet_push(lv_snippet_t * item);
 static lv_snippet_t * lv_get_snippet(uint16_t index);
+static lv_coord_t convert_indent_pct(lv_obj_t * spans, lv_coord_t width);
 
 /**********************
  *  STATIC VARIABLES
@@ -229,7 +230,8 @@ void lv_spangroup_set_overflow(lv_obj_t * obj, lv_span_overflow_t overflow)
 /**
  * Set the indent of the spangroup.
  * @param obj pointer to a spangroup object.
- * @param indent The first line indentation
+ * @param indent The first line indentation, support percent
+ *               for LV_SPAN_MODE_FIXED and LV_SPAN_MODE_BREAK mode.
  */
 void lv_spangroup_set_indent(lv_obj_t * obj, lv_coord_t indent)
 {
@@ -445,7 +447,7 @@ lv_coord_t lv_spangroup_get_expand_width(lv_obj_t * obj)
         return 0;
     }
 
-    lv_coord_t width = spans->indent;
+    lv_coord_t width = LV_COORD_IS_PCT(spans->indent) ? 0 : spans->indent;
     lv_span_t * cur_span;
     lv_coord_t letter_space = 0;
     _LV_LL_READ(&spans->child_ll, cur_span) {
@@ -481,12 +483,13 @@ lv_coord_t lv_spangroup_get_expand_height(lv_obj_t * obj, lv_coord_t width)
     lv_text_flag_t txt_flag = LV_TEXT_FLAG_NONE;
     lv_coord_t line_space = lv_obj_get_style_text_line_space(obj, LV_PART_MAIN);
     lv_coord_t max_width = width;
-    lv_coord_t max_w  = max_width - spans->indent; /* first line need minus indent */
+    lv_coord_t indent = convert_indent_pct(obj, max_width);
+    lv_coord_t max_w  = max_width - indent; /* first line need minus indent */
 
     /* coords of draw span-txt */
     lv_point_t txt_pos;
     txt_pos.y = 0;
-    txt_pos.x = 0 + spans->indent; /* first line need add indent */
+    txt_pos.x = 0 + indent; /* first line need add indent */
 
     lv_span_t * cur_span = _lv_ll_get_head(&spans->child_ll);
     const char * cur_txt = cur_span->txt;
@@ -803,6 +806,23 @@ static inline void span_text_check(const char ** text)
     }
 }
 
+static lv_coord_t convert_indent_pct(lv_obj_t * obj, lv_coord_t width)
+{
+    lv_spangroup_t * spans = (lv_spangroup_t *)obj;
+
+    lv_coord_t indent = spans->indent;
+    if(LV_COORD_IS_PCT(spans->indent)) {
+        if(spans->mode == LV_SPAN_MODE_EXPAND) {
+            indent = 0;
+        }
+        else {
+            indent = (width * LV_COORD_GET_PCT(spans->indent)) / 100;
+        }
+    }
+
+    return indent;
+}
+
 /**
  * draw span group
  * @param spans obj handle
@@ -827,13 +847,14 @@ static void lv_draw_span(lv_obj_t * obj, const lv_area_t * coords, const lv_area
     lv_text_flag_t txt_flag = LV_TEXT_FLAG_NONE;
     lv_coord_t line_space = lv_obj_get_style_text_line_space(obj, LV_PART_MAIN);;
     lv_coord_t max_width = lv_area_get_width(coords);
-    lv_coord_t max_w  = max_width - spans->indent; /* first line need minus indent */
+    lv_coord_t indent = convert_indent_pct(obj, max_width);
+    lv_coord_t max_w  = max_width - indent; /* first line need minus indent */
     lv_opa_t obj_opa = lv_obj_get_style_opa(obj, LV_PART_MAIN);
 
     /* coords of draw span-txt */
     lv_point_t txt_pos;
     txt_pos.y = coords->y1;
-    txt_pos.x = coords->x1 + spans->indent; /* first line need add indent */
+    txt_pos.x = coords->x1 + indent; /* first line need add indent */
 
     lv_span_t * cur_span = _lv_ll_get_head(&spans->child_ll);
     const char * cur_txt = cur_span->txt;
@@ -947,7 +968,7 @@ static void lv_draw_span(lv_obj_t * obj, const lv_area_t * coords, const lv_area
         lv_text_align_t align = lv_obj_get_style_text_align(obj, LV_PART_MAIN);
         if(align != LV_TEXT_ALIGN_LEFT) {
             lv_coord_t align_ofs = 0;
-            lv_coord_t txts_w = is_first_line ? spans->indent : 0;
+            lv_coord_t txts_w = is_first_line ? indent : 0;
             for(int i = 0; i < item_cnt; i++) {
                 lv_snippet_t * pinfo = lv_get_snippet(i);
                 txts_w = txts_w + pinfo->txt_w + pinfo->letter_space;