1

基本的に、私はmpdf（カスタムPHPクラス）を使用して、Webサイトのユーザー向けの動的pdfを作成しています。1つを除いて、すべてうまく機能しています。この種の効果を作成するために、私のWebサイトの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を使用して実際に期間を生成する方がおそらく良い考えです。明確にするために、この効果http://jsfiddle.net/j6JWT/7/をPHPで実現したいと思います。

私が概念化に苦労しているのは、それを動的にする方法です。アイテムはデータベースからのものであり、一部のリストアイテムは非常に長いため、理解している場合は、それらと価格の間のドットが少なくて済みます。

ありとあらゆる助けが大切です！

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 に答える