tree组件overflow

src/compenents/tree-department/index.tsx

@@ -87,13 +87,17 @@ export const TreeDepartment = (props: PropInterface) => {
     for (let i = 0; i < departments[id].length; i++) {
       if (!departments[departments[id][i].id]) {
         arr.push({
-          title: departments[id][i].name,
+          title: (
+            <span className="tree-title-elli">{departments[id][i].name}</span>
+          ),
           key: departments[id][i].id,
         });
       } else {
-        const new_arr: Option[] = checkArr(departments, departments[id][i].id);
+        const new_arr: any[] = checkArr(departments, departments[id][i].id);
         arr.push({
-          title: departments[id][i].name,
+          title: (
+            <span className="tree-title-elli">{departments[id][i].name}</span>
+          ),
           key: departments[id][i].id,
           children: new_arr,
         });
@@ -105,9 +109,11 @@ export const TreeDepartment = (props: PropInterface) => {
   const getNewTitle = (title: any, id: number, counts: any) => {
     if (counts) {
       let value = counts[id] || 0;
-      return title + "(" + value + ")";
+      return (
+        <span className="tree-title-elli">{title + "(" + value + ")"}</span>
+      );
     } else {
-      return title;
+      return <span className="tree-title-elli">{title}</span>;
     }
   };
 

src/index.less

@@ -457,6 +457,7 @@ textarea.ant-input {
   margin-bottom: 8px !important;
   display: flex;
   align-items: center !important;
+
   &.ant-tree-treenode-selected {
     background-color: #fff2f0 !important;
     border-radius: 6px !important;
@@ -559,9 +560,11 @@ textarea.ant-input {
 
 .tree-title-elli {
   width: 100%;
+  display: -webkit-box;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
 .ant-tabs {

src/pages/department/index.tsx

@@ -68,7 +68,7 @@ const DepartmentPage = () => {
         arr.push({
           title: (
             <>
-              <div className="w-174px mr-24">{departments[id][i].name}</div>
+              <div className="tree-title-elli">{departments[id][i].name}</div>
               <div className="d-flex">
                 <Tooltip placement="top" title="可拖拽排序">
                   <i
@@ -103,7 +103,7 @@ const DepartmentPage = () => {
         arr.push({
           title: (
             <>
-              <div className="w-174px mr-24">{departments[id][i].name}</div>
+              <div className="tree-title-elli">{departments[id][i].name}</div>
               <div className="d-flex">
                 <Tooltip placement="top" title="可拖拽排序">
                   <i

src/pages/resource/resource-category/index.tsx

@@ -66,7 +66,7 @@ const ResourceCategoryPage = () => {
         arr.push({
           title: (
             <>
-              <div className="w-174px mr-24">{categories[id][i].name}</div>
+              <div className="tree-title-elli">{categories[id][i].name}</div>
               <div className="d-flex">
                 <Tooltip placement="top" title="可拖拽排序">
                   <i
@@ -101,7 +101,7 @@ const ResourceCategoryPage = () => {
         arr.push({
           title: (
             <>
-              <div className="w-174px mr-24">{categories[id][i].name}</div>
+              <div className="tree-title-elli">{categories[id][i].name}</div>
               <div className="d-flex">
                 <Tooltip placement="top" title="可拖拽排序">
                   <i