Question

我尝试使用dom pdf创建价格标签。价格标签由一些div容器组成。其中一个容器有最大高度，但这不起作用。因为如果我将此容器的文本更改为200字而不是100字的文本，则价格标签会更高。但我需要一个固定的高度。

这是一个问题吗？

HTML：

<html>

    <head>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="tag">
    <div class="header">
    Product
    </div>
    <div class="article">
    <div class="info">Lorem sd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>

    </div>
    <div class="barcode">
    <p>Barcode</p>
    </div>



</div>
</body>
</html>

CSS：

.tag {
    border-style: solid;
    min-width:11.5cm;
    max-width:11.5cm;
    max-height:3.5cm;
    margin:0.1cm;
    padding:0.1cm;
}
.header {
    min-width:11.5cm;
    max-width:11.5cm;
    font-size:35px;
    font-weight:bold;
}

.article {
    min-width:11.5cm;
    max-width:11.5cm;

}

.info {

  float:left;
  text-align:left;
  min-width:7.5cm;
  max-width:7.5cm;
  min-height:2.0cm;
  max-height:2.0cm;
  font-size:10px;
}

.barcode {
    text-align:center;
    min-width:11.5cm;
    max-width:11.5cm;
}`

.info类和.tag类很重要。 max-width工作正常。

Answer 1

如果您想要修复高度，只需使用height并为其指定固定值，然后使用overflow: hidden隐藏额外数据。

CSS的变化：

.info {
  overflow: hidden;
  float:left;
  text-align:left;
  min-width:7.5cm;
  max-width:7.5cm;
  height:35px;
  font-size:10px;
}

请参阅此处的工作示例：FIDDLE

Answer 2

我找到了解决方案。这有点令人困惑。 max-height和min-height无效。如果我只使用高度的解决方案，它正确工作。

@Aayushi Jain：您的解决方案正常运行，唯一的问题是我的浏览器使用缓存中的旧css而不是新版本。

Dompdf最大高度不起作用

2 个答案: