2013-08-09 3 views
1

Я пытаюсь создать ценник с dom pdf. Ценник состоит из некоторых контейнеров div. Один из этих контейнеров имеет максимальную высоту, но это не работает. Потому что, если я изменил текст этого контейнера на текст с 200 словами вместо 100, ценовой тег будет масштабироваться выше. Но мне нужна фиксированная высота.Dompdf max-height не работает

Это проблема?

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 работает правильно.

+1

Можете ли вы предоставить некоторые HTML и CSS, чтобы мы могли лучше понять, что происходит – JackSD

+0

Я добавил свой HTML и CSS. (Я знаю, что есть некоторые дубликаты атрибутов CSS, это только для тестирования) – Marco

+0

Увидев, что ваши 'min-' и 'max-height' одинаковы, почему бы просто не использовать' height'? – DarkBee

ответ

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

+0

Хорошо, я попробую. Моя единственная проблема заключалась в том, что мое решение не работает в Dompdf, но в браузере, таком как хром, firefox и т. Д. – Marco

+0

Без изменений, тот же результат. «Высота» масштабируется. – Marco

0

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

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

+0

Вы должны отметить ответ @ aayushi-jain как принятый, если ее решение сработало. – BrianS

+0

Кроме того, да, максимальная высота и минимальная высота не поддерживаются полностью. Я считаю, что они работают нормально на изображениях, но не блокируют объекты. – BrianS

Смежные вопросы