Текст переполнения выравнивается по левому краю ⇐ CSS

[Anonymous]

Когда ячейка описания переполняется, она переполняется, показывая центр текста. Как я могу сделать так, чтобы отображалась левая часть (начало).
Если текст не переполняется, я хочу, чтобы он все равно располагался по центру.

Я использую следующий 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

Подробнее здесь: https://stackoverflow.com/questions/479 ... align-left