防止内容扩展或溢出列

Question

我是CSS网格的新手，但尝试了但没有运气，我正在为A4纸创建可打印格式，并为列设置了固定大小。只要输入的VALUE超出宽度/边界，第一行（标题行除外）中“ UNIT”列的内容就会被扩展/扩展到下一列。我希望值（即“ UnitName12345678”）不要越过边界，而是移到同一列中的下一行。同样在minmax(50px , max-content)中，仅将50px应用于HEADER行，而我缺少将其应用于所有行。

此容器将具有动态生成的多行。

当前输出：

预期输出：

密码笔：https://codepen.io/thaslim123/pen/gyQwmm

body {
  margin: 0px;
}

.printcontainertable {
  display: inline-grid;
  grid-template-rows: minmax(50px, max-content);
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  border: 1px solid black;
  text-align: center;
}

<div class="printcontainertable">

  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>


  <div> 1. </div>
  <div> Apple </div>
  <div>UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>

</div>

PS：由于我将在上述容器的顶部和底部（即.printcontainertable）的顶部和底部安装固定的HEADER和FOOTER容器，因此如何为该容器固定静态高度。请建议我是否还有其他更好的方法可以在GRID中实现它。

Answer 1

好的，我确实认为还有其他一些可以改进的地方，具体取决于您的需求（语义，结构等）。可以通过应用{{1}来解决有关超出边界的单词的主要问题。 }到包含文本的项目。

word-break: break-word

body {
  margin: 0px;
}

.printcontainertable {
  display: inline-grid;
  grid-template-rows: minmax(50px, max-content);
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  border: 1px solid black;
  text-align: center;
}

.unitname {
  word-break: break-word;
}

Answer 2

  

我希望VALUE（即“ UnitName12345678”）不要越过边界，而是移到同一列中的下一行。

然后允许不间断的文本行分成多行。使用overflow-wrap属性。

将此添加到您的代码中：

.printcontainertable div {
    overflow-wrap: break-word;
}

---

  

还在minmax(50px , max-content)中，仅将50px应用于HEADER行，而我所缺少的是将其应用于所有行。

您正在使用grid-template-rows。这样会创建显式行，即您定义的行。

所以当你这样说：

grid-template-rows: minmax(50px , max-content);

...您仅用该规则定义一行。

您需要使用grid-auto-rows，它适用于隐式行，这是动态生成行时所需的。

对您的代码进行此调整：

.printcontainertable {
    display: inline-grid;
    /* grid-template-rows:   minmax(50px , max-content); */
    grid-auto-rows:   minmax(50px , max-content); /* new */
    grid-template-columns: 100px 500px 100px  100px 100px 100px;
    width:1150px;
    padding:10px;
}

.printcontainertable {
  display: inline-grid;
  /* grid-template-rows:   minmax(50px , max-content); */
  grid-auto-rows: minmax(50px, max-content); /* new */
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  overflow-wrap: break-word; /* new */
  border: 1px solid black;
  text-align: center;
}

body {
  margin: 0px;
}

<div class="printcontainertable">
  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>
  <div> 1. </div>
  <div> Apple </div>
  <div>UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
</div>