diff --git a/package/text-clamp.vue b/package/text-clamp.vue
index f41def6..a61028b 100644
--- a/package/text-clamp.vue
+++ b/package/text-clamp.vue
@@ -42,12 +42,14 @@ const props = withDefaults(
     location?: "start" | "middle" | "end";
     ellipsis?: string;
     autoResize?: boolean;
+    html?: boolean;
   }>(),
   {
     expanded: false,
     location: "end",
     ellipsis: "…",
     autoResize: false,
+    html: false,
   }
 );
 const emits = defineEmits<{
@@ -71,7 +73,7 @@ const realMaxHeight = computed(() => {
 });
 
 const applyChange = () => {
-  textRef.value && (textRef.value.textContent = realText.value);
+  textRef.value && (props?.html ? textRef.value.innerHTML = realText.value : textRef.value.textContent = realText.value);
 };
 const update = () => {
   if (state.localExpanded) return;
diff --git a/src/App.vue b/src/App.vue
index d36fa24..f7f77ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -334,6 +334,16 @@ import TextClamp from 'vue3-text-clamp';
             <code>false</code>
           </p>
         </li>
+        <li>
+          <p>
+            <code>html: boolean</code>
+          </p>
+          <p>{{ t("props8") }}</p>
+          <p>
+            {{ t("default") }}
+            <code>false</code>
+          </p>
+        </li>
       </ul>
       <div class="divider text-center" :data-content="t('api2')"></div>
       <ul>
diff --git a/src/plugins/locales/en-US.ts b/src/plugins/locales/en-US.ts
index 1981c7a..6e9fce5 100644
--- a/src/plugins/locales/en-US.ts
+++ b/src/plugins/locales/en-US.ts
@@ -27,6 +27,7 @@ export default {
   props5: "The location of the ellipsis.",
   props6: "Whether to observe the root element's size.",
   props7: "Whether the clamped area is expanded(Supports .sync modifier).",
+  props8: "Used to render any html on the string. Use only with trusted input.",
 
   api2: "↓ Slots",
   beforeScope: "Slot scope: ",