1

我尝试使用 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 类很重要。最大宽度工作正常。

4

2 回答 2

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

于 2013-08-09T12:53:02.500 回答
0

我找到了解决方案。这有点令人困惑。 max-height并且min-height不工作。如果我只使用高度的解决方案，它可以正常工作。

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

于 2013-08-10T15:39:36.240 回答