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%;
}

文本在 span 内左对齐，但 span 居中并超出了 div 的两侧。