Максимальная максимальная высота <div>несмотря на то, что текст длиннее - PullRequest
Новая
       48

Максимальная максимальная высота <div>несмотря на то, что текст длиннее

1 голос
/ 25 апреля 2019

Я создаю документ с использованием библиотеки отчетов BFO (встроенной в NetSuite ERP). У меня есть текстовый блок, который я хотел бы ограничить двумя строками, усекать, если это больше, но я не могу заставить overflow:hidden что-то сделать. Настройка height ограничивает минимальную высоту, но если текст длиннее, он расширяет содержание, а не обрезается.

Вот документ, который я представляю: 

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE pdf PUBLIC '-//big.faceless.org//report' 'report-1.1.dtd'>
<pdf>
    <body width="3in" height="1.25in" padding="0">
        <div font-family="sans-serif" font-size="14pt" width="3in" height="2em" border="1px solid green" overflow="hidden">
            <p margin="0">Short Name</p>
        </div>
        <pbr/>
        <div font-family="sans-serif" font-size="14pt" width="3in" height="2em" border="1px solid green" overflow="hidden">
            <p margin="0">This Is An Item With A Really Extremely Long Name That Doesn't Fit</p>
        </div>
    </body>
</pdf>

И полученный PDF:

1 Ответ

3 голосов
/ 25 апреля 2019

Тег атрибута BFO overflow работает только на абсолютно позиционированных элементах, согласно их документации :

Если блок абсолютно позиционирован и больше, чем его родительский элемент, что делать с содержимым, которое «переполняет» блок родительских элементов.

Похоже, что элемент, содержащий контент, которым вы хотите управлять, должен быть расположен абсолютно, но атрибут overflow можно применить к родительскому элементу. Таким образом, вы можете добавить position="absolute" к элементу <p> для нужного эффекта: 

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE pdf PUBLIC '-//big.faceless.org//report' 'report-1.1.dtd'>
<pdf>
    <body width="3in" height="1.25in" padding="0">
        <div font-family="sans-serif" font-size="14pt" width="3in" height="2em" 
border="1px solid green" overflow="hidden">
            <p margin="0">Short Name</p>
        </div>
        <pbr/>
        <div font-family="sans-serif" font-size="14pt" width="3in" height="2em" border="1px solid green" overflow="hidden">
            <p position="absolute" margin="0">This Is An Item With A Really Extremely Long Name That Doesn't Fit</p>
        </div>
    </body>
</pdf>

enter image description here

...