防止内容扩展或溢出列

时间:2019-04-24 22:39:30

标签: html css css3 css-grid

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

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

当前输出:

Present output

预期输出:

Expected Output

密码笔: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中实现它。

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

  

我希望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>