diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue
index eabe9c5e0..ed7901fcc 100644
--- a/packages/notice-bar/index.vue
+++ b/packages/notice-bar/index.vue
@@ -11,7 +11,7 @@
     <div :class="b('wrap')" ref="wrap">
       <div
         ref="content"
-        :class="[b('content'), animationClass]"
+        :class="[b('content'), animationClass, { 'van-ellipsis': !scrollable }]"
         :style="contentStyle"
         @animationend="onAnimationEnd"
         @webkitAnimationEnd="onAnimationEnd"
diff --git a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
index 87685fbf8..a79e42d1c 100644
--- a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-notice-bar" style="color:undefined;background:undefined;">
       <!---->
       <div class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
       <!---->
     </div>
diff --git a/packages/vant-css/src/notice-bar.css b/packages/vant-css/src/notice-bar.css
index a28911c0b..88d24c9f6 100644
--- a/packages/vant-css/src/notice-bar.css
+++ b/packages/vant-css/src/notice-bar.css
@@ -2,22 +2,23 @@
 
 .van-notice-bar {
   display: flex;
-  color: $orange;
-  padding: 9px 15px;
-  font-size: 12px;
-  line-height: 1.5;
+  color: #ed6a0c;
+  height: 40px;
+  padding: 0 15px;
+  font-size: 14px;
+  line-height: 24px;
   position: relative;
-  background-color: #fff7cc;
+  align-items: center;
+  background-color: #fffbe8;
 
   &--withicon {
     position: relative;
-    padding-right: 30px;
+    padding-right: 40px;
   }
 
   &__left-icon {
     height: 18px;
     min-width: 20px;
-    padding-top: 1px;
     box-sizing: border-box;
 
     img {
@@ -27,16 +28,15 @@
   }
 
   &__right-icon {
-    top: 10px;
-    right: 10px;
+    top: 12px;
+    right: 15px;
+    font-size: 16px;
     position: absolute;
-    font-size: 15px;
-    line-height: 1;
   }
 
   &__wrap {
     flex: 1;
-    height: 18px;
+    height: 24px;
     overflow: hidden;
     position: relative;
   }
@@ -44,6 +44,10 @@
   &__content {
     position: absolute;
     white-space: nowrap;
+
+    &.van-ellipsis {
+      max-width: 100%;
+    }
   }
 
   &__play {