药品说明书排版

src/components/TreatDesc/DrugInfo/index.jsx

@@ -14,7 +14,7 @@ class DrugInfo extends Component {
                 { drugInfo && drugInfo.drugDesc.length > 0 && <div className={style['drug-desc-wrapper']}>
                     <div className={style['drug-title1']}>{drugInfo.title}说明书</div>
                     {drugInfo.drugDesc.map((item, index) =>{
-                        return <div className={style['drug-desc-item']}><span className={style['drug-desc-title']}>{item.title}</span> <span className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: item.content}}></span> </div>
+                        return <div className={style['drug-desc-item']}><span className={style['drug-desc-title']}>{item.title}</span> <div className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: item.content}}></div> </div>
                     })}
                 </div> }
                 { !drugInfo || (drugInfo && drugInfo.drugDesc.length === 0) && <div className={style['drug-desc-wrapper']}>

src/components/TreatDesc/DrugInfo/index.less

@@ -30,7 +30,15 @@
     width: 40px;
 }
 .drug-desc-item {
+    zoom: 1;
     padding: 5px 0;
+    &:after{
+        content: "";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
 }
 .drug-desc-title {
     display: inline-block;
@@ -38,6 +46,12 @@
     font-size: 14px;
     height: 100%;
     float: left;
+    width: 85px;
+    text-align:justify;
+    text-justify:distribute-all-lines;/*ie6-8*/
+    text-align-last:justify;/* ie9*/
+    -moz-text-align-last:justify;/*ff*/
+    -webkit-text-align-last:justify;/*chrome 20+*/
 }
 .drug-desc-title::before {
     content: '【'
@@ -52,4 +66,7 @@
     color: #000000;
     text-align: center;
 }
-.drug-desc-content {}
+.drug-desc-content {
+    /*width: 100%;*/
+    margin-left: 90px;
+}