3

次のマークアップを実装する必要があります。 ここに画像の説明を入力してください

問題は、HTML+CSSとXSLTしか使用できないことです。

テキストをXSLで行に分割し、各行をセット<p>付きの異なる段落として印刷するテンプレートを作成することを考えましたborder-bottom。HTML + CSSを使用してこれを実現するためのより簡単な方法はありますか？

小さな更新：ここでのポイントは、この下線をテキストを超えて延長し、使用可能なすべての幅を使用することです。したがって、最初の行が短い場合を除いて、すべての行は同じ長さです（コピーブックの行のように）。

4

5 に答える 5

10

アンダースコアのよう<span>に扱うようなインライン要素を使用できます。border-bottom

<p>
    <span>
        <del>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</del> sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </span>
</p>

およびCSS：

span {
    border-bottom: 4px solid black;
}
del {
    color: red;
}

こちらのデモ。

上記のマークアップを使用した結果：

Chromeになります

編集：

1.1。

@aefxxの答えを拡張して、CSS3を使用できる場合は、次のことを試してください。

.strike {
    background-image: -moz-linear-gradient(top , rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-repeat: repeat-y;
    background-size: 100% 38px;
}
p {
    line-height: 38px;
}
p:before {
    background: #fff;
    content:"\00a0";
    display: inline-block;
    height: 38px;
    width: 50px;
}
del span {
    color: red;
}

こちらのデモ-これは、FirefoxやChromeなどの最新のブラウザでのみ機能します。

Chromeでの結果：

グラデーションを使用した結果

2.2。

正当化されたテキストに満足している場合：

p,span {
    border-bottom: 4px solid black;
    line-height: 30px;
    text-align: justify;
    text-indent: 50px;
}
p>span {
    padding-bottom: 5px;
    vertical-align: top;
}
del span {
    border-bottom: 0 none;
    color: red;
}

こちらのデモ。行の高さにはいくつかの問題がありますが、簡単に理解できるはずです。

Chromeでの結果：

ここに画像の説明を入力してください

それ以外は、いくつかのコンテナで行をラップする必要があるかもしれません。

于 2012-11-06T11:14:08.150 に答える
1

おそらく、純粋なマークアップでこれより良くなることはないでしょう：jsfiddleデモ。


アンケートのコメントに基づいて更新を編集します。

プレビュー：
ここに画像の説明を入力してください

p span.indent {
    width: 160px; height: 30px;
    vertical-align: top;
    background: #fff;
    display: inline-block;
}

p span.strike {
    color: #000;
    text-decoration: line-through;
}    

p del {
    color: #ff0000;
    text-decoration: none;
}

p {
    width: 490px;
    font-family: Arial, sans-serif;
    line-height: 30px;
    background: url('http://img84.imageshack.us/img84/1889/63051094.gif') left top;
}

<p>
    <span class="indent"></span><span class="strike"><del>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</del></span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</p>
于 2012-11-06T11:23:34.243 に答える
0

HTML

<div id="content">
<p><span id="strike">some content that you need to display</span>
<span id="underline">Some more content that will come here</span></p>
</div>​

CSS

    #content
    {
        height:auto;
        width:200px;
    }
    #content #strike
    {
        text-decoration:line-through;
        color:Red;
    }

    #content #underline
    {
     text-decoration:underline;   
    }

    span
   {
    border-bottom:4px solid Black;
   }

ライブサンプル </p>

于 2012-11-06T11:12:13.947 に答える
0

そのフォーマットが必要なコンテンツの周りにdivを作成し、CSS内でそのdivを使用して必要なフォーマットを作成します。

于 2012-11-06T11:03:27.817 に答える
0

下の境界線を設定するために、実際には各行を独自のHTML要素にする必要はありません。インライン要素に境界線を適用でき、境界線は要素の各行に適用されます。

取り消し線の色をテキストの色とは異なるものにするために、そこにも追加のHTML要素が必要です。（Firefoxは実装していますが-moz-text-decoration-color。）

HTML

<span class="fake-underline">
    <del><span>Final blitz by Obama and Romney as election arrives.</span></del> Candidates attend rallies late into the night as US prepares to go to the polls.
</span>

CSS

.fake-underline {
    line-height: 2;
    border-bottom: solid 5px black;
}
del {
    text-decoration: line-through;
}
del span {
    color: red;
}
于 2012-11-06T11:26:24.070 に答える