我已经为对话框场景构建了CSS网格。我使用max-content
的{{1}}功能来确保最长的发言者姓名定义了左列的宽度。
问题是grid-template-columns
列中没有发言人姓名。在当前设置下,舞台导演的语句定义了左列的max-content,这没有任何意义。
是否有一种方法可以忽略.stage-director
的{{1}}内容-计算?
.dd.statement.stage-director
max-content
答案 0 :(得分:1)
您可以像下面这样使用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>