css Question posted in
Some basic documentation can be found here.

Css – Truncate text in a flexbox/grid

I want to keep all team names on one line and truncate/add an ellipsis on the right-hand side. For example: Bright & Hov… / Tottenham Hot…

I can’t work out a way to fix the left column truncating on the left-hand side.

Can any please give some hints?

.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;
}
<div class="matches-list">
  <div class="match">
    <div class="match-meta">
      Sun 6 Oct 2024 • 16:30
    </div>
    <div class="match-info">
      <div class="team team-left">
        Brighton &amp; Hove Albion <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/331.png&scale=crop&cquality=40&location=origin&w=96&h=96">
      </div> 
      <div class="score">3 - 2</div> 
      <div class="team team-right">
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/367.png&scale=crop&cquality=40&location=origin&w=96&h=96" style="width:20px;"> Tottenham Hotspur
      </div>
    </div>
  </div>
                
                
  <div class="match">
    <div class="match-meta">
      Mon 19 Aug 2024 • 20:00
    </div>
    <div class="match-info">
      <div class="team team-left">
        Leicester City <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/375.png&scale=crop&cquality=40&location=origin&w=96&h=96" style="width:20px;">
      </div> 
      <div class="score">1 - 1</div> 
      <div class="team team-right">
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/380.png&scale=crop&cquality=40&location=origin&w=96&h=96"> Wolverhampton Wanderers
      </div>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    Here’s your solution:

    .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;
    align-items: center;
}

.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-left p {
  text-overflow: ellipsis;
  overflow: hidden;
}

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

.team-right p {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.score {
    font-size: 1.2em;
    font-weight: bold;
    color: #61B5E0;
    text-align: center;
}
    <div class="matches-list">
  <div class="match">
    <div class="match-meta">
      Sun 6 Oct 2024 • 16:30
    </div>
    <div class="match-info">
      <div class="team team-left">
        <p>Brighton &amp; Hove Albion</p>
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/331.png&scale=crop&cquality=40&location=origin&w=96&h=96">
      </div> 
      <div class="score">3 - 2</div> 
      <div class="team team-right">
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/367.png&scale=crop&cquality=40&location=origin&w=96&h=96" style="width:20px;"> 
        <p>Tottenham Hotspur</p>
      </div>
    </div>
  </div>
                
                
  <div class="match">
    <div class="match-meta">
      Mon 19 Aug 2024 • 20:00
    </div>
    <div class="match-info">
      <div class="team team-left">
      <p>Leicester City</p>
         <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/375.png&scale=crop&cquality=40&location=origin&w=96&h=96" style="width:20px;">
      </div> 
      <div class="score">1 - 1</div> 
      <div class="team team-right">
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/380.png&scale=crop&cquality=40&location=origin&w=96&h=96"> <p>Wolverhampton Wanderers</p>
      </div>
    </div>
  </div>
    Login or Signup to reply.
  2. 0

    You are there. You just need to add a <p> or <div> in .team and set it’s width along with overflow: hidden; and text-overflow: ellipsis; properties.

    .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;
    margin: auto;
}

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

.team p {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}

.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;
}
    <div class="matches-list">
  <div class="match">
    <div class="match-meta">
      Sun 6 Oct 2024 • 16:30
    </div>
    <div class="match-info">
      <div class="team team-left">
        <p>Brighton &amp; Hove Albion</p>
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/331.png&scale=crop&cquality=40&location=origin&w=96&h=96">
      </div> 
      <div class="score">3 - 2</div> 
      <div class="team team-right">
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/367.png&scale=crop&cquality=40&location=origin&w=96&h=96" style="width:20px;">
        <p>Tottenham Hotspur</p>
      </div>
    </div>
  </div>
                
                
  <div class="match">
    <div class="match-meta">
      Mon 19 Aug 2024 • 20:00
    </div>
    <div class="match-info">
      <div class="team team-left">
        <p>Leicester City</p>
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/375.png&scale=crop&cquality=40&location=origin&w=96&h=96" style="width:20px;">
      </div> 
      <div class="score">1 - 1</div> 
      <div class="team team-right">
        <img src="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/380.png&scale=crop&cquality=40&location=origin&w=96&h=96">
        <p>Wolverhampton Wanderers</p>
      </div>
    </div>
  </div>

    Hope this is helpful to understand.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search