忽略一列用于css网格的最大内容计算

2023年6月14日 133次阅读

我为对话框场景构建了一个CSS Grid.我使用grid-template-columns的max-content功能来确保最长的扬声器名称定义左列的宽度.

问题是.stage-director列没有发言者姓名.使用当前设置,舞台导演的声明定义了左列的最大内容,这是没有意义的.

有没有办法忽略最大内容计算的.dd.statement.stage-director内容？

dl {
  display: grid;
  grid-template-columns: max-content auto;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

dt,
dd {
  margin: 0;
  padding: 0;
}

.speaker.stage-director {
  display: none;
}

.statement.stage-director {
  grid-column: span 2;
}
<dl>
  <dt class="speaker">ROMEO</dt>
  <dd class="statement">What, shall this speech be spoke for our excuse? Or shall we on without a apology?</dd>

  <dt class="speaker stage-director"></dt>
  <dd class="statement stage-director">This is a long statement of the stage director</dd>

  <dt class="speaker">ROMEO</dt>
  <dd class="statement">Give me a torch: I am not for this ambling; Being but heavy, I will bear the light.</dd>

  <dt class="speaker">The magic big cat</dt>
  <dd class="statement">I say nothing</dd>

  <dt class="speaker">MERCUTIO</dt>
  <dd class="statement">Nay, gentle Romeo, we must have you dance.</dd>
</dl>

https://jsfiddle.net/ahe_dev/k8rfhtpj/3/

最佳答案 而不是max-content auto,你可以使用auto 1fr和white-space：nowrap,如下所示：

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

dt, dd {
  margin: 0;
  padding: 0;
}
.speaker {
  white-space:nowrap;
}

.speaker.stage-director {
  display: none;
}

.statement.stage-director {
  grid-column: span 2;
}
<dl>
  <dt class="speaker">ROMEO</dt>
  <dd class="statement">What, shall this speech be spoke for our excuse?
Or shall we on without a apology?</dd>

  <dt class="speaker stage-director"></dt>
  <dd class="statement stage-director">This is a long statement of the stage director</dd>

  <dt class="speaker">ROMEO</dt>
  <dd class="statement">Give me a torch: I am not for this ambling;
Being but heavy, I will bear the light.</dd>

  <dt class="speaker">The magic big cat</dt>
  <dd class="statement">I say nothing</dd>
  
  <dt class="speaker">MERCUTIO</dt>
  <dd class="statement">Nay, gentle Romeo, we must have you dance.</dd>
</dl>
点赞