PROSAGA码农传奇-雾计算/网格计算-忽略一列用于css网格的最大内容计算

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

作者: 真不错
发布时间: 2024-04-15 02:51:51 (1月前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    代替
     <code>
      max-content auto
    </code>
     您可以使用
     <code>
      auto 1fr
    </code>
     和
     <code>
      white-space:nowrap
    </code>
     如下：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>