如何优化网格时间表的移动端适配，解决小屏文本溢出问题？

问题概述 #

已完成的网格时间表在桌面端显示正常，但iPhone 13 mini这类小屏设备上，部分长文本（如「Kondiční kickbox」）无法在单元格内完整显示，不想通过制作两个表格切换的方式简化时间列，寻求更优适配方案。

优化方案 #

• 精细化字体与行高适配：用clamp()函数实现响应式字体，让文本在不同屏幕尺寸下自动缩放，同时调整行高保证换行后可读性。
• 强制文本换行与自适应高度：移除单元格固定高度，改为最小高度，添加文本换行属性，确保长内容能完整显示。
• 时间列内容自适应切换：利用CSS伪元素和媒体查询，在小屏设备上自动简化时间文本（无需维护双表格）。
• 小屏 padding 压缩：针对极小屏设备减少单元格内边距，释放更多显示空间。

修改后的完整代码 #

CSS 部分 #

.grid {
  display: grid;
  grid-template-columns: repeat(64, 1fr);
  text-align: center;
}

.grid > * {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #c0c0c0;
  padding: 5px 5px;
  font-weight: bold;
  /* 改为最小高度，让内容自适应 */
  min-height: 66px;
  line-height: 1.5rem;
  font-size: 13px;
  /* 强制长单词换行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.span-col-4 { grid-column: span 4 / auto; }
.span-col-48 { grid-column: span 48 / auto; }
.span-col-6 { grid-column: span 6 / auto; }
.span-col-2 { grid-column: span 2 / auto; }
.span-col-38 { grid-column: span 38 / auto; }
.span-col-5 { grid-column: span 5 / auto; }
.span-col-44 { grid-column: span 44 / auto; }
.span-col-60 { grid-column: span 60 / auto; }

.time,
.day-column {
  background-image: linear-gradient(
    to top,
    #b51c18,
    #c6201a,
    #d8231d,
    #ea271f,
    #fc2b21
  );
  color: white;
  min-height: 45px;
}

.day-column { color: black; }

.sparingy {
  background-image: linear-gradient(
    to bottom,
    #02080a,
    #0d1c21,
    #0e2b37,
    #103c50,
    #154c6a
  );
  color: white;
}
.kickbox6 {
  background-image: linear-gradient(
    to bottom,
    #ffa93a,
    #ffa32f,
    #ff9d24,
    #ff9716,
    #ff9000
  );
  color: black;
}

.kickbox10 {
  background-image: linear-gradient(
    to bottom,
    #ff9000,
    #ff8100,
    #ff7200,
    #ff6100,
    #ff4d00
  );
  color: black;
}
.rodice {
  background-image: linear-gradient(
    to bottom,
    #fffe00,
    #f4fe00,
    #eaff00,
    #deff00,
    #d3ff00
  );
  color: black;
}

.mma {
  background-image: linear-gradient(
    to bottom,
    #ff0e00,
    #ea0e02,
    #d50e03,
    #c00e04,
    #ac0d04
  );
  color: white;
}
.zavodnici {
  background-image: linear-gradient(
    to top,
    #114560,
    #0f5274,
    #0c5f88,
    #096c9d,
    #0a79b3
  );
  color: white;
}
.sparingy {
  background-image: linear-gradient(
    to bottom,
    #0063ff,
    #1748cc,
    #142f9c,
    #09186f,
    #000046
  );
}
.kondicni {
  background-color: #489bc9;
  color: black;
}

.box {
  background-color: #524d4d;
  color: white;
}

/* 平板适配 */
@media screen and (max-width: 1024px) {
  .grid > * {
    font-size: clamp(10px, 1.5vw, 13px);
    line-height: 1.2rem;
  }
}

/* 小屏手机（如iPhone 13 mini）适配 */
@media screen and (max-width: 375px) {
  .grid > * {
    font-size: clamp(9px, 2.5vw, 11px);
    line-height: 1.1rem;
    padding: 3px 3px;
  }
  
  /* 自动简化时间列文本 */
  .time:not(:empty)::before {
    content: attr(data-time-short);
  }
  .time:not(:empty) {
    font-size: 0; /* 隐藏原文本 */
  }
}

HTML 部分 #

<div class="grid">
  <div class="span-col-4 time"></div>
  <div class="span-col-4 time" data-time-short="06-07">06:00-07:00</div>
  <div class="span-col-4 time" data-time-short="07-08">07:00-08:00</div>
  <div class="span-col-4 time" data-time-short="08-09">08:00-09:00</div>
  <div class="span-col-4 time" data-time-short="09-10">09:00-10:00</div>
  <div class="span-col-4 time" data-time-short="10-11">10:00-11:00</div>
  <div class="span-col-4 time" data-time-short="11-12">11:00-12:00</div>
  <div class="span-col-4 time" data-time-short="12-13">12:00-13:00</div>
  <div class="span-col-4 time" data-time-short="13-14">13:00-14:00</div>
  <div class="span-col-4 time" data-time-short="14-15">14:00-15:00</div>
  <div class="span-col-4 time" data-time-short="15-16">15:00-16:00</div>
  <div class="span-col-4 time" data-time-short="16-17">16:00-17:00</div>
  <div class="span-col-4 time" data-time-short="17-18">17:00-18:00</div>
  <div class="span-col-4 time" data-time-short="18-19">18:00-19:00</div>
  <div class="span-col-4 time" data-time-short="19-20">19:00-20:00</div>
  <div class="span-col-4 time" data-time-short="20-21">20:00-21:00</div>
  
  <div class="span-col-4">Pondělí</div>
  <div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div>
  <div class="span-col-4 kondicni">Kondiční kickbox</div>
  <div class="span-col-6 box">BOX</div>
  <div class="span-col-2"></div>
  
  <div class="span-col-4">Úterý</div>
  <div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div>
  <div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div>
  <div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div>
  <div class="span-col-5 mma">MMA</div>
  <div class="span-col-6 zavodnici">K1 - závodníci</div>
  <div class="span-col-2"></div>
  
  <div class="span-col-4">Středa</div>
  <div class="span-col-44">Soukromé lekce a veřejnost po domluvě</div>
  <div class="span-col-4 rodice">
    Rodiče a děti <br />
    3 - 6 let
  </div>
  <div class="span-col-4 kondicni">Kondiční kickbox</div>
  <div class="span-col-6 box">BOX</div>
  <div class="span-col-2"></div>
  
  <div class="span-col-4">Čtvrtek</div>
  <div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div>
  <div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div>
  <div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div>
  <div class="span-col-5 mma">MMA</div>
  <div class="span-col-6 zavodnici">K1 - závodníci</div>
  <div class="span-col-2"></div>
  
  <div class="span-col-4">Pátek</div>
  <div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div>
  <div class="span-col-6 sparingy">Sparingy</div>
  <div class="span-col-6"></div>
  
  <div class="span-col-4">Sobota</div>
  <div class="span-col-60">Pronájem, semináře, akce, atd...</div>
  
  <div class="span-col-4">Neděle</div>
  <div class="span-col-60">Pronájem, semináře, akce, atd...</div>
</div>

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