style-modified

 {{# list}}
 <div class="grade-bill">
     <div class="grade-bill-left">
-        <div class="order">{{desc}}{{#if activityInfoTitle}}<span class="order-tip"> ({{activityInfoTitle}})</span>{{/if}}</div>
+        <div class="order"><span>{{desc}}</span>{{#if activityInfoTitle}}<span class="order-tip">({{activityInfoTitle}}</span><span class="order-tip-end">)</span>{{/if}}</div>
         <div class="time">{{createTimeStr}}</div>
     </div>
     <div class="grade-bill-right">

@@ -143,19 +143,31 @@
             .grade-bill-left > .order {
                 font-size: 22px;
                 white-space: nowrap;
+
+                span {
+                    float: left;
                 }
 
-            .grade-bill-left > .order > .order-tip {
+                .order-tip-end {
+                    color: #4a90e2;
+                }
+
+                .order-tip {
                     font-size: 18px;
                     color: #4a90e2;
                     font-weight: 300;
+                    max-width: 260px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin-left: 10px;
                 }
 
-            .grade-bill-left > .time {
+                .time {
                     margin-top: 4px;
                     font-size: 18px;
                     color: #444;
                 }
+            }
 
             .grade-bill-right {
                 display: flex;