.ibiz-page-tag { position: relative; box-sizing: border-box; // width: calc(100% + 30px); height: 38px; padding: 0 60px 0 30px; background: #f6f6f6; .tags-body { position: relative; width: 100%; height: 100%; overflow: hidden; .tags-container { position: absolute; overflow: visible; white-space: nowrap; transition: left .3s ease; .ivu-tag { margin: 0; height: 38px; line-height: 38px; border: 0; border-radius: 0; border-right: 1px solid #ddd; font-size: 14px; .text-icon { height: 16px; margin-bottom: -3px; } .ivu-icon-ios-close { visibility: hidden; } .tag-text { display: table-cell; .ivu-tooltip { display: block; .ivu-tooltip-rel { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } } } } .ivu-tag.tag-is-active { background: #fff; } .ivu-tag:hover,.ivu-tag.tag-is-active { .ivu-icon-ios-close { visibility: initial; } } } } .move-btn { font-size: 18px; width: 30px; height: 38px; line-height: 38px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center; cursor: pointer; } .move-btn:hover { background: #efefef; } .move-left, .move-right, .ivu-dropdown{ position: absolute; top: 0; } .move-left { left: 0; } .move-right { right: 30px; } .ivu-dropdown { right: 0; } } .tags-transition-move { transition: transform .3s; } .tags-transition-enter,.tags-transition-leave-to{ opacity: 0; }