ソースを参照

fix:修复nut-col组件中文字超出时样式问题

richard1015 6 年 前
コミット
270281996a
3 ファイル変更7 行追加7 行削除
  1. 1 0
      src/packages/col/col.scss
  2. 3 4
      src/packages/flex/demo.vue
  3. 3 3
      src/packages/flex/doc.md

+ 1 - 0
src/packages/col/col.scss

@@ -11,6 +11,7 @@
 .nut-col{
 	float: left;
 	box-sizing: border-box;
+	word-break: break-all;
 }
 
 @for $i from 1 through 24 {

+ 3 - 4
src/packages/flex/demo.vue

@@ -229,7 +229,7 @@
           <div class="flex-content flex-content-height">1</div>
         </nut-col>
         <nut-col :span="12">
-          <div class="flex-content flex-content-light">顶部对齐 -- flex-start</div>
+          <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
         </nut-col>
         <nut-col :span="6">
           <div class="flex-content flex-content-height">3</div>
@@ -242,7 +242,7 @@
           <div class="flex-content flex-content-height">1</div>
         </nut-col>
         <nut-col :span="12">
-          <div class="flex-content flex-content-light">居中对齐 -- center</div>
+          <div class="flex-content flex-content-light">居中对齐 - center</div>
         </nut-col>
         <nut-col :span="6">
           <div class="flex-content flex-content-height">3</div>
@@ -255,7 +255,7 @@
           <div class="flex-content flex-content-height">1</div>
         </nut-col>
         <nut-col :span="12">
-          <div class="flex-content flex-content-light">底部对齐 -- flex-end</div>
+          <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
         </nut-col>
         <nut-col :span="6">
           <div class="flex-content flex-content-height">3</div>
@@ -328,7 +328,6 @@ export default {
   margin-bottom: 10px;
 }
 .flex-content {
-  height: 30px;
   line-height: 30px;
   color: #fff;
   text-align: center;

+ 3 - 3
src/packages/flex/doc.md

@@ -147,17 +147,17 @@
 ```html
 <nut-row type="flex" gutter="10" align="flex-start">
     <nut-col :span="12">
-        <div class="flex-content flex-content-light">顶部对齐 -- flex-start</div>
+        <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
     </nut-col>
 </nut-row>
 <nut-row type="flex" gutter="10" align="center">
     <nut-col :span="12">
-        <div class="flex-content flex-content-light">居中对齐 -- center</div>
+        <div class="flex-content flex-content-light">居中对齐 - center</div>
     </nut-col>
 </nut-row>
 <nut-row type="flex" gutter="10" align="flex-end">
     <nut-col :span="12">
-        <div class="flex-content flex-content-light">底部对齐 -- flex-end</div>
+        <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
     </nut-col>
 </nut-row>