Максимальная высота Dompdf не работает

Пробую создать ценник с 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 важны. максимальная ширина работает правильно.


css dompdf
person Marco    schedule 09.08.2013    source источник
comment
Не могли бы вы предоставить немного HTML и CSS, чтобы мы могли лучше понять, что происходит?   -  person JackSD    schedule 09.08.2013
comment
Я добавил свой HTML и CSS. (Я знаю, что есть дубликаты атрибутов CSS, это только для тестирования)   -  person Marco    schedule 09.08.2013
comment
Видя, что ваши min- и max-height одинаковы, почему бы просто не использовать height?   -  person DarkBee    schedule 09.08.2013
comment
Да, но иногда результат был другим.   -  person Marco    schedule 09.08.2013

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите исправить высоту, просто используйте 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

person Aayushi Jain    schedule 09.08.2013
comment
Хорошо, я попробую. Моя единственная проблема заключалась в том, что мое решение не работает в Dompdf, а в браузере, таком как chrome, firefox и т. д. - person Marco; 09.08.2013
comment
Никаких изменений, тот же результат. height масштабируется. - person Marco; 09.08.2013

arrow_upward
0
arrow_downward

Я нашел решение. Это немного сбивает с толку. max-height и min-height не работают. Если я использую решение только с высотой, оно работает правильно.

@Aayushi Jain: Ваше решение работает, единственная проблема заключалась в том, что мой браузер использует старый CSS из кеша вместо новой версии.

person Marco    schedule 10.08.2013
comment
Кроме того, да, max-height и min-height поддерживаются не полностью. Я считаю, что они нормально работают с изображениями, но не с блочными объектами. - person BrianS; 14.08.2013