自动换行时调整大小 div

Question

我有一个包含 fixed-width 列的 table。如果一列已排序，我想在其标题左侧显示一个箭头图标。但是，当标题中的文本换行时，div 未正确调整大小并且箭头被按到最左边。

下面的演示显示了两列。左边的标题很短，是正确的。右边的标题有点长，不太合意：https://jsfiddle.net/79pfyxo6/

这是我用于 table 标题的 CSS：

.sortedColumn {
    float: right;
    display: table;
    table-layout: fixed; 
}

.titleElement {
    display: table-cell;
    vertical-align: middle;
}

我怎样才能改变它，使第二列的箭头紧贴着环绕的文本，如下图所示：http://pasteboard.co/2xqPi8Nx.png

Answer 1

您好，请查看此css，它可能对您有所帮助

 td, th {
        background: #88FF88;    
        text-align: right;
        word-wrap: break-word;
    }
    td {
        width: 150px;
    }
    .sortedColumn {
        float:right;
        display: table;
        table-layout: fixed; 
    }
    .arrow {
        width: 15px;
    }
    .sortedColumn {    
        display: table;
        table-layout: fixed; 
    }    
    .sortedColumn img{
        vertical-align: middle; //added new 
    }
    .titleElement {
        display: initial;    // changed
        vertical-align: middle;
    }

自动换行时调整大小 div

Resize div when word wraps

css

word-wrap