1

基本上，我使用 mpdf（自定义 PHP 类）为网站用户创建动态 pdf。一切都很好，除了一件事。我在我的网站的 html/css 中使用点前导符来创建这种效果：

http://jsfiddle.net/j6JWT/7/

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt span:after { content: " .................................................................................." }

但是，mpdf 在生成 pdf 时完全忽略了这个 css。如果有人熟悉 mpdf，如果您告诉我为什么会这样，我将不胜感激。

问题是，使用 PHP 实际生成句点可能是一个更好的主意。澄清一下，我想通过PHP实现这个效果http://jsfiddle.net/j6JWT/7/ 。

我在概念化方面遇到的问题是如何使其动态化。这些项目来自数据库，一些列表项目很长，所以如果你理解的话，它们和价格之间需要更少的点。

任何和所有的帮助都很有价值！

4

2 回答 2

2

我认为使用 CSS 或 PHP 生成“...”内容不是一个安全的解决方案，因为您不确定策略的行为。这纯粹是一个演示问题。

您可以使用更多 CSS 生成相同的解决方案

dl { width: 450px }
dt { float: left; height: 20px; width: 300px; display: block; position: relative; }
dd { float: left; height: 16px; padding-top: 6px; padding-left: 5px; width: 120px; overflow: hidden }
dt { border-bottom: 1px dotted black; }
dt span { border: 0; display: inline-block; height: 20px; position: absolute; left: 0; top: 6px; background-color: #FFFFFF; padding-right: 5px; }

这是一个工作示例：jsfiddle

您只需检查 PDF 类是否正确处理这些 CSS 规则。

于 2013-03-14T03:21:26.830 回答
0

如果它是等宽字体很容易。

echo '<pre>';
// pretend we know the maximum item name strlen, these dots would be that length + 1 at least 
$maxdots='........................................................................';
$maxlen=strlen($maxdots);

$items=array(array('Drug 1', '10ml'), array('Another drug', '20ml'));
foreach ($items as $item){
    $item[1]=substr($maxdots.$item[1], strlen($item[0])-$maxlen);
    echo $item[0].$item[1]."\n";

}

如果不是等宽，另一种方法是使用重复的背景图像

<div class="dottedrow">
    <span class="title">Drug 1</span>
    <span class="size">10ml</span>
</div>

使用 CSS

.dottedrow{
    background:url(dots.png) bottom left repeat-x; /* or is it repeat-y?*/
    display:block;
}
.dottedrow span{
    background:#fff; /* knock out the image */
    float:left;
}
.dottedrow span.title{
    text-align:left; 
    width:70%;
}
.dottedrow span.size{
        text-align:right; 
        width:30%;
    }

现在我没有想法了。

于 2013-03-14T03:14:56.173 回答