diff --git a/packages/site-components/src/components/td-doc-footer/style.less b/packages/site-components/src/components/td-doc-footer/style.less
index 6e66fee04..56408441f 100644
--- a/packages/site-components/src/components/td-doc-footer/style.less
+++ b/packages/site-components/src/components/td-doc-footer/style.less
@@ -2,6 +2,7 @@
 :host {
   display: block;
   box-sizing: border-box;
+  container-type: inline-size;
   color: var(--text-secondary);
   font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: 16px;
@@ -29,6 +30,7 @@
   }
 
   &__brand {
+    min-width: 0;
     align-self: stretch;
     display: flex;
     flex-direction: column;
@@ -49,13 +51,14 @@
     }
 
     p {
-      width: 340px;
+      width: min(340px, 100%);
       height: 48px;
       margin: 0;
       color: var(--text-secondary);
       font-size: 16px;
       font-weight: 300;
       line-height: 24px;
+      overflow-wrap: anywhere;
     }
   }
 
@@ -256,7 +259,7 @@
   }
 }
 
-@media screen and (min-width: 960px) and (max-width: 1200px) {
+.footer-tablet-layout() {
   .TDesign-doc-footer {
     &__inner {
       width: 100%;
@@ -377,7 +380,7 @@
   }
 }
 
-@media screen and (max-width: 959px) {
+.footer-mobile-layout() {
   .TDesign-doc-footer {
     &__inner {
       width: 100%;
@@ -480,3 +483,19 @@
     }
   }
 }
+
+@media screen and (min-width: 960px) and (max-width: 1200px) {
+  .footer-tablet-layout();
+}
+
+@media screen and (max-width: 959px) {
+  .footer-mobile-layout();
+}
+
+@container (min-width: 960px) and (max-width: 1200px) {
+  .footer-tablet-layout();
+}
+
+@container (max-width: 959px) {
+  .footer-mobile-layout();
+}