尽管文本更长，但限制最大高度 <div>

Question

我正在使用 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：

Answer 1

BFO overflow 属性标签仅适用于绝对定位的元素，根据 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.

看来包含要控制的内容的元素必须绝对定位，但是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>

尽管文本更长，但限制最大高度 <div>

Limit maximum height of <div> despite text being longer

overflow

netsuite

bfo