diff --git a/media/css/seahub.css b/media/css/seahub.css
index e48c324a20..50a9211520 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -2177,6 +2177,23 @@ textarea:-moz-placeholder {/* for FF */
 #share-popup .tip {
     max-width:400px;
 }
+.ellipsis-op-target {
+    display:inline-block;
+    vertical-align:bottom;
+}
+#share-popup .op-target {
+    max-width:400px;
+}
+#rename-form .op-target {
+    max-width:280px;
+}
+#mv-form .op-target {
+    max-width:410px;
+}
+#folder-perm-popup .op-target {
+    max-width:540px;
+}
+/* group-join-form */
 /* group-join-form */
 #id_group_join_msg {
     width:260px;
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 938030e8ab..cd83db3800 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -214,7 +214,7 @@ define([
             $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
 
             var op_detail = $('.detail', form);
-            op_detail.html(op_detail.html().replace('%(name)s', '<span class="op-target">' + Common.HTMLescape(dirent_name) + '</span>'));
+            op_detail.html(op_detail.html().replace('%(name)s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(dirent_name) + '">' + Common.HTMLescape(dirent_name) + '</span>'));
 
             var form_id = form.attr('id');
             var _this = this;
@@ -279,7 +279,7 @@ define([
                 obj_type = this.model.get('is_dir') ? 'dir' : 'file';
 
             var title = op_type == 'mv' ? gettext("Move {placeholder} to:") : gettext("Copy {placeholder} to:");
-            title = title.replace('{placeholder}', '<span class="op-target">' + Common.HTMLescape(obj_name) + '</span>');
+            title = title.replace('{placeholder}', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(obj_name) + '">' + Common.HTMLescape(obj_name) + '</span>');
 
             var form = $(this.mvcpTemplate({
                 form_title: title,
diff --git a/static/scripts/app/views/folder-perm.js b/static/scripts/app/views/folder-perm.js
index f60d00d57f..76afdecbf3 100644
--- a/static/scripts/app/views/folder-perm.js
+++ b/static/scripts/app/views/folder-perm.js
@@ -47,7 +47,7 @@ define([
         render: function () {
             this.$el.html(this.template({
                 title: gettext("Set {placeholder}'s permission")
-                    .replace('{placeholder}', '<span class="op-target">' + Common.HTMLescape(this.obj_name) + '</span>')
+                    .replace('{placeholder}', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(this.obj_name) + '">' + Common.HTMLescape(this.obj_name) + '</span>')
             }));
             return this;
         },
diff --git a/static/scripts/app/views/share.js b/static/scripts/app/views/share.js
index ad555b317d..df5bca2efa 100644
--- a/static/scripts/app/views/share.js
+++ b/static/scripts/app/views/share.js
@@ -50,7 +50,7 @@ define([
         render: function () {
             this.$el.html(this.template({
                 title: gettext("Share {placeholder}")
-                    .replace('{placeholder}', '<span class="op-target">' + Common.HTMLescape(this.obj_name) + '</span>'),
+                    .replace('{placeholder}', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(this.obj_name) + '">' + Common.HTMLescape(this.obj_name) + '</span>'),
                 is_dir: this.is_dir,
                 is_repo_owner: this.is_repo_owner,
                 is_virtual: this.is_virtual,