From 0a35197a35513ca45308bb7163c8243b75dd6f8d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 8 Mar 2017 12:11:31 +0800
Subject: [PATCH] Fix long name of upload item style

---
 components/upload/demo/basic.md    |  2 +-
 components/upload/style/index.less | 24 +++++++++++++++++++-----
 components/upload/uploadList.tsx   |  2 ++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
index 975b7a0c8e..21fd8139eb 100644
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Classic mode. File selection dialog pops up when upload button is clicked 
+Classic mode. File selection dialog pops up when upload button is clicked.
 
 ````jsx
 import { Upload, message, Button, Icon } from 'antd';
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index 98ca8d39f5..a941fe6532 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -117,24 +117,38 @@
     overflow: hidden;
     margin-top: 8px;
     font-size: @font-size-base;
+    position: relative;
+
+    &-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-left: 16px;
+      width: 100%;
+      display: inline-block;
+    }
 
     &-info {
       height: 22px;
       line-height: 22px;
-      padding: 0 4px;
-      transition: background-color 0.3s ease;
+      padding: 0 12px 0 4px;
+      transition: background-color .3s;
 
       .@{iconfont-css-prefix}-paper-clip {
         margin-right: 4px;
         font-size: @font-size-base;
         color: @text-color-secondary;
+        position: absolute;
+        top: 6px;
       }
+
       .@{iconfont-css-prefix}-cross {
         .iconfont-size-under-12px(10px);
-        transition: all 0.3s ease;
+        transition: all .3s;
         opacity: 0;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 4px;
         color: @text-color-secondary;
         line-height: 22px;
         &:hover {
@@ -229,7 +243,7 @@
       white-space: nowrap;
       margin: 0 0 0 8px;
       line-height: 44px;
-      transition: all 0.3s ease;
+      transition: all .3s;
       padding-left: 48px;
       padding-right: 8px;
       max-width: 100%;
diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx
index 33778222fc..fff4316063 100644
--- a/components/upload/uploadList.tsx
+++ b/components/upload/uploadList.tsx
@@ -111,6 +111,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
           rel="noopener noreferrer"
           className={`${prefixCls}-list-item-name`}
           onClick={e => this.handlePreview(file, e)}
+          title={file.name}
         >
           {file.name}
         </a>
@@ -118,6 +119,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
         <span
           className={`${prefixCls}-list-item-name`}
           onClick={e => this.handlePreview(file, e)}
+          title={file.name}
         >
           {file.name}
         </span>