overflownetsuitebfo

Limit maximum height of <div> despite text being longer

I'm creating a document using the BFO Report library (embedded in NetSuite ERP). I have a text block which I would like to limit to two lines, truncating if it's more than that, but I can't seem to get overflow:hidden to actually do anything. Setting height limits the minimum height, but if the text is longer it extends the containing rather than being cut off.

Here's the document I'm rendering:

<?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>

And the resulting PDF:

"Short Name" is in a box approximately twice as high as the text, but "Really Extremely Long Name" has pushed the containing box out further than it's supposed to.

Solution

  • The BFO overflow attribute tag only works on absolutely positioned elements, as per their documentation:

    If a block is absolutely positioned and larger than it's parent element, what to do with the content that "overflows" the parent elements block.

    It appears the element containing the content you want to control must be positioned absolutely, but the overflow attribute can be applied to the parent element. So you can add position="absolute" to your <p> element for the effect you want:

    <?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