5

HTML (HTML5 ではありません!) で表のセル内に文字を繰り返し印刷する方法はありますか?

*(HTML のみを使用、または HTML と CSS のみを使用)

** "." を印刷する必要があります。セルの全長を通して。セルの正確な幅がわからない!

4

5 に答える 5

6

あなたの質問を詳しく説明した後、解決策があります。点線の下の境界線と白い背景のテキストが上にある div。

例 ：

CSS:

.line{
    border-bottom:1px dotted black;
    position:relative;
    height:16px;
}

.line span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:-2px;
    height:100%;
    padding:0 5px;
}
.line .price{
    position:absolute;
    right:0;
}​

HTML:

<div class="line">
    <span class="title">name</span>
    <span class="price">123.23$</span>
</div>
<div class="line">
    <span class="title">name</span>
    <span class="price">123.23$</span>
</div>​

http://jsfiddle.net/bKuVe/

于 2012-10-31T20:12:08.030 に答える
4

私は誤ってこの質問に出くわし、自分の答えを投稿するのを止めることができませんでした.

私はこの方法を数年前から使用していますが、そのシンプルさが気に入っています。全体的なアイデアはfloat: left|right、テキストを含む要素に使用し、blockそれを囲む要素がマージンを生成することです。overflow: hiddenブロック要素に追加することで、これを利用します。
ここでのもう 1 つの改善点は::after、実際のブロック要素の代わりに疑似クラスを使用することです。ドットはスタイルシートの一部のように動作するはずなので、これは完全に理にかなっています。

.line {
    padding: 60px 0;
}
.title {
    float: left;
}
.price {
    float: right;
}
.line::after {
    content: "\0020";
    display: block;
    min-height: 1em;
    border-bottom: 1px dotted;
    overflow: hidden;
}
<div class="line">
    <span class="title">name</span>
    <span class="price">123.23$</span>
</div>

于 2015-03-13T18:14:32.690 に答える
0

背景画像を作って x を繰り返すのはどうですか？

 background:url(character.png) repeat-x;
于 2012-10-31T08:36:13.250 に答える
0

コーディングが好きなら、次のようなことを試すことができます。

var tag = [tag];
var h = tag[0].getBoundingClientRect().height;
while(h===tag[0].getBoundingClientRect().height){
    tag[0].innerHTML+='-';
};
tag[0].innerHTML=tag[0].innerHTML.replace('-','');
于 2016-12-13T19:43:25.400 に答える
-2

プレーンな HTML を使用している場合 (サーバーで生成された HTML を使用していないことを意味します)、文字を複数回記述します。サーバーで生成された HTML (PHP、JSP など) を使用している場合は、文字を複数回記述したり、ループを使用したりできます。JavaScript を使用していない限り、これはクライアント側では実行できません。

于 2012-10-31T08:43:07.793 に答える