html - 溢出文本左对齐

Question

当描述单元格溢出时，它会溢出并显示文本的中心。我怎样才能做到这一点，以便左侧(开始)是显示的位。 如果文本没有溢出，我希望它仍然居中。

我使用的CSS如下

.td {
    display: flex;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
padding: 0.5em;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis ;
min-width: 0px;
white-space: nowrap;
border-bottom: 1px solid #d0d0d0;
}

.td :hover{
white-space: normal;
}

这是我目前拥有的代码笔 https://codepen.io/anon/pen/rpWpve

Answer 1

或者，设置 <span>的max-width

.td > span {
  max-width:100%;
}

文本在跨度内左对齐，但跨度居中并延伸到 div 的两侧。