[SalesForce] Visualforce PDF and CSS overflow: hidden

I am trying to create a Visualforce page that renders as PDF. My problem is that I want to display as much of a rich text field as can fit. If I use overflow: hidden in my CSS, the text is displayed, but I get blank pages that would be where the additional content would go if it weren't hidden. I can even drag and select the hidden text on the PDF.

Is there a way to use CSS in a VF page rendered as PDF to actually cut the text off?

<apex:page renderas="pdf" standardController="Account" showHeader="false" applyhtmltag="false">
    <head>
    <style>
    @page { 
        size: 8.5in 11in;
        @top-right {
            content: 'Page ' counter(page) ' of ' counter(pages);
            font-style: bold;
        }
    }
    h1 {
        max-height: 200px;
        overflow: hidden;
    }
    </style>
    </head>
    <h1>{!Account.Description}</h1>

</apex:page>

Best Answer

Based on this SO answer it seems like you need to explicitly specify the width of the container.

enter image description here

<apex:page renderas="{!BLANKVALUE($CurrentPage.parameters.r, 'html')}" standardController="Account" showHeader="false" applyhtmltag="false">
    <head>
    <style>
    @page { 
        size: 8.5in 11in;
        @top-right {
            content: 'Page ' counter(page) ' of ' counter(pages);
            font-style: bold;
        }
    }

    span {
        border: solid 2px blue;
        display: block;
        max-height:200px;

        overflow: hidden;
        width: 7in;
    }
    </style>
    </head>
    <body>
        <span>{!Account.Description}</span>
        <p>{!Account.Name}</p>
    </body>
</apex:page>
Related Topic