Flexbox/Grid文本截断问题：左列队名需右侧添加省略号

问题现状 #

当前左侧球队名称（如Brighton & Hove Albion）在空间不足时会从左侧被截断，而需求是和右侧球队一样从右侧显示省略号（如Bright & Hov...）。

核心原因 #

.team-left 使用了 justify-content: flex-end 和 text-align: right，但直接在flex容器上设置 text-overflow 时，文本的截断方向会受布局对齐影响，导致左侧截断。需要将文本单独包裹在一个块级容器中，让截断逻辑独立于flex对齐。

修复步骤 #

• HTML结构调整：给每个球队的文本内容包裹一个 <span> 标签，将文本和图片分离为两个独立的flex子元素。
• CSS样式补充：给左侧球队的span设置 text-align: right 和截断样式，右侧球队的span保留默认左对齐的截断逻辑，同时让span占据flex容器的剩余空间。

修改后的完整代码 #

CSS 代码 #

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

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

.team-left {
    justify-content: flex-end;
}

/* 左侧文本截断样式 */
.team-left span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    flex: 1;
}

.team-right {
    justify-content: flex-start;
}

/* 右侧文本截断样式 */
.team-right span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

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

HTML 代码 #

<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">
        <span>Brighton &amp; Hove Albion</span> 
        <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;">
        <span>Tottenham Hotspur</span>
      </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">
        <span>Leicester City</span>
        <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">
        <span>Wolverhampton Wanderers</span>
      </div>
    </div>
  </div>
</div>

效果说明 #

修改后，左侧球队名称会在空间不足时从右侧显示省略号（如Bright & Hov...），和右侧球队的截断逻辑一致，同时保留了原有布局的对齐样式。

内容的提问来源于stack exchange，提问作者revlis