修改样式

src/views/userAgency/index.vue

@@ -9,11 +9,10 @@
         @click="handleTabClick(value.value)"
         class="cursor-pointer"
         :class="{ '!text-[#323335] font-medium': activeTab === value.value }"
+        >{{ value.name }}</span
       >
-        {{ value.name }}
-      </span>
     </div>
-    <div class="flex-1 overflow-y-auto" @scroll="handleScroll">
+    <div class="flex-1 w-full overflow-y-auto" @scroll="handleScroll">
       <div
         class="p-[16px] space-y-[6px] border-b-[1px] border-solid border-[#F2F3F5]"
         v-for="(value, index) in list"
@@ -29,15 +28,17 @@
             </el-tag>
           </div>
           <div
-            class="truncate flex-1 flex items-center text-[16px] font-medium"
+            class="flex-1 w-full break-words text-wrap flex items-center text-[16px] font-medium"
+            :class="{ truncate: !value.showMore }"
+            style="display: -webkit-box"
           >
             {{ value.name }}
           </div>
           <div
-            class="bg-white absolute bottom-0 right-0 cursor-pointer flex items-center pl-[16px]"
+            class="bg-white h-[24px] text-[#86909C] cursor-pointer flex items-center text-[12px]"
             @click="toggleShowMore(index)"
           >
-            {{ value.showMore ? "收起" : "展开" }}
+            {{ value.showMore ? "折叠" : "展开" }}
             <svg-icon
               svgName="icon-zhankai"
               class="w-[12px] h-[12px]"

tailwind.config.js

@@ -22,7 +22,16 @@ module.exports = {
   },
  plugins: [
     function({ addUtilities }) {
-      const newUtilities = {
+         const newUtilities = {
+          '.truncate': {
+          display: '-webkit-box',
+          '-webkit-box-orient': 'vertical',
+          '-webkit-line-clamp': '1',
+          'overflow': 'hidden',
+          'text-overflow': 'ellipsis',
+          'word-wrap': 'break-word',
+          'word-break': 'break-word',
+        },
         '.truncate-2': {
           display: '-webkit-box',
           '-webkit-box-orient': 'vertical',