Обрезать текст во флексбоксе/сетке ⇐ CSS

[Anonymous]

Я хочу, чтобы названия всех команд располагались в одной строке и обрезались/добавлялись многоточия справа. Например: Bright & Hov... / Tottenham Hot...
Я не могу придумать, как исправить обрезание левого столбца с левой стороны.
Может кто-нибудь подсказать?

Код: Выделить всё

.matches-list {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 500px;
border: 2px solid #F5F5F5;
border-radius: 5px;
padding: 5px 10px;
}

.match {
display: block;
padding: 8px 10px;
}

.match-meta {
font-size: 0.8em;
margin-bottom: 5px;
color: #666;
text-transform: uppercase;
text-align: center;
}

.match-info {
display: grid;
grid-template-columns: 3fr 1fr 3fr;
gap: 8px;
margin-bottom: 5px;
}

.team {
display: flex;
align-items: center;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.team img {
flex-shrink: 0;
width: 20px;
height: 20px;
margin: 0 5px;
}

.team-left {
justify-content: flex-end;
text-align: right;
flex: 1;
}

.team-right {
justify-content: flex-start;
text-align: left;
flex: 1;
}

.score {
font-size: 1.2em;
font-weight: bold;
color: #61B5E0;
text-align: center;
}

Код: Выделить всё

Sun 6 Oct 2024 • 16:30


Brighton & Hove Albion 
[img]https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/331.png&scale=crop&cquality=40&location=origin&w=96&h=96[/img]

3 - 2

[img]https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/367.png&scale=crop&cquality=40&location=origin&w=96&h=96[/img]
 Tottenham Hotspur





Mon 19 Aug 2024 • 20:00


Leicester City 
[img]https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/375.png&scale=crop&cquality=40&location=origin&w=96&h=96[/img]

1 - 1

[img]https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/380.png&scale=crop&cquality=40&location=origin&w=96&h=96[/img]
 Wolverhampton Wanderers

Подробнее здесь: https://stackoverflow.com/questions/791 ... exbox-grid