我已经为对话场景构建了一个CSS网格。我使用grid-template-columns
max-content
功能来确保最长的说话人名称定义左列的宽度。
问题是没有扬声器名称的.stage-director
列。在当前的设置下,舞台导演的声明定义了左列的最大内容,这是没有意义的。
有没有办法忽略max-content
计算的.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/
您可以使用如下所示的auto 1fr
和white-space:nowrap
来代替max-content auto
:
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>