diff --git a/css/contrastDetails.css b/css/contrastDetails.css
index 8fa65cb..d592b9c 100644
--- a/css/contrastDetails.css
+++ b/css/contrastDetails.css
@@ -75,7 +75,8 @@
   padding-left: 20px;
 }
 .body .item .head.options .options-box {
-  width: 100px;
+  width: fit-content;
+  max-width: 100px;
   height: 20px;
   background-color: #e4e8fd;
   border-radius: 48px;
@@ -91,6 +92,12 @@
   height: 5px;
   margin-left: 4px;
 }
+.body .item .head.options .options-box .text {
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .body .item .head.options .options-list-mask {
   position: fixed;
   top: 0;
@@ -106,9 +113,9 @@
   width: 200px;
   background-color: #e4e8fd;
   border-radius: 10px;
-  padding-left: 38px;
-  padding: 6px 0 6px 38px;
+  padding: 6px 12px 6px 38px;
   z-index: 6;
+  width: max-content;
 }
 .body .item .head.options .options-list .options-item {
   color: #555555;
diff --git a/css/contrastDetails.less b/css/contrastDetails.less
index 78b11b9..78408d4 100644
--- a/css/contrastDetails.less
+++ b/css/contrastDetails.less
@@ -94,7 +94,8 @@
 
             &.options {
                 .options-box {
-                    width: 100px;
+                    width: fit-content;
+                    max-width: 100px;
                     height: 20px;
                     background-color: rgba(228, 232, 253, 1);
                     border-radius: 48px;
@@ -109,6 +110,12 @@
                         height: 5px;
                         margin-left: 4px;
                     }
+                    .text {
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
                 }
 
                 .options-list-mask {
@@ -127,10 +134,9 @@
                     width: 200px;
                     background-color: rgba(228, 232, 253, 1);
                     border-radius: 10px;
-                    padding-left: 38px;
-                    padding: 6px 0 6px 38px;
+                    padding: 6px 12px 6px 38px;
                     z-index: 6;
-
+                    width: max-content;
                     .options-item {
                         &:not(:last-of-type) {
                             border-bottom: 1px dotted #c1c5d4;
diff --git a/html/contrastDetails.html b/html/contrastDetails.html
index 5632eee..8938385 100644
--- a/html/contrastDetails.html
+++ b/html/contrastDetails.html
@@ -51,7 +51,7 @@
                 <div class="item flexflex" v-for="(item,key) in listObj">
                     <div class="head options" v-if="key == 'rank'">
                         {{ item }}
-                        <div class="" style="position: relative">
+                        <div style="position: relative">
                             <div class="options-box flexacenter">
                                 <div class="text">QS世界专…</div>
                                 <img class="icon" src="{~}/img/triangle-black.svg" />