Parcourir la source

修改右侧推送或者辅检名称过长时显示情况(2442)

zhangxc il y a 5 ans
Parent
commit
ad85bf3729

+ 5 - 1
src/common/less/variables.less

@@ -177,7 +177,11 @@
 .hide{
   display: none!important;
 }
-
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .llStyle{
   box-shadow: 0 10px 20px 0 #989DA3;
   // filter:progid:DXImageTransform.Microsoft.Shadow(color='#989DA3',Direction=125,Strength=6);

+ 11 - 4
src/components/PushItems/RecommendInspect/index.jsx

@@ -20,14 +20,14 @@ class RecommendInspect extends Component {
     
     renderItem(item) {
       const { changeFlag } = this.props
-      return <span>
+      return <span className={style['itemLabelBox']} title={item.name}>
           <input
             id={item.id + item.name}
             onChange={() =>changeFlag(item)}
             type="checkbox"
             checked={item.checked}
           />
-          <label for={item.id + item.name}>{item.name}</label>
+          <label  for={item.id + item.name}>{item.name}</label>
       </span>
     }
 
@@ -40,9 +40,16 @@ class RecommendInspect extends Component {
       let firstLineNum = 0;   //第一行字数
       let secondLineNum = 0;      //第二行字数
       const listHide = list.map((item, index) => {
-        firstLineNum = firstLineNum + item.name.length + 2;
+        let itemNameLen =  item.name.length
+        if(itemNameLen > 24) {
+          itemNameLen = 24
+        }
+        firstLineNum = firstLineNum + itemNameLen + 2;
         if (firstLineNum > 26) {
-          secondLineNum = secondLineNum + item.name.length + 2; 
+          if(itemNameLen > 18) {
+            itemNameLen = 18
+          }
+          secondLineNum = secondLineNum + itemNameLen + 2; 
           if(secondLineNum > 20) {
             return;
           } else {

+ 2 - 0
src/components/PushItems/RecommendInspect/index.less

@@ -17,10 +17,12 @@
             line-height: 26px;
             padding: 0px 0px 0px 0px;
             span{
+              .ellipsis;
               font-size: 14px;
               line-height: 14px;
               display: inline-block;
               margin: 6px;
+              max-width: 280px;
               cursor: pointer;
               input[type='checkbox']{
                 float: left;