html - 防止内容扩展或溢出列

Question

我是 CSS 网格的新手并努力尝试但没有运气，我正在为 A4 纸创建可打印格式，并为列设置固定大小。只要输入的 VALUE 超过宽度/边框，第一行(不包括标题行)中“UNIT”列的内容就会跨越/扩展到下一列。我希望 VALUE(即“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:由于我将在上述容器的顶部和底部固定 HEADER 和 FOOTER 容器(即 .printcontainertable)，我如何修复相同的静态高度。如果有任何其他更好的方法在 GRID 中实现它，请向我提出建议。

Answer 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;
}

<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 class="unitname">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>