15

複数行のテキストの最後の行に下線を引くか、少なくともそのほのめかしを作成したいと思います。私は何かトリッキーなことをしようとしているので、次の例をよく見てください。

A.これが私がしたいことです（__テキストに下線を引くべきマーク）：

A line of text that is long enough so that it wraps
to another line.
________________

B.これが私が望まないものです：

A line of text that is long enough so that it wraps
___________________________________________________
to another line.
________________

C.またはこれ：

A line of text that is long enough so that it wraps
to another line.
___________________________________________________

この効果はCMS用であるため、テキストの正確な長さはわかりません。これは、<span>sまたは<u>タグを手動で挿入することはオプションではないことを意味します。また、javascriptを使用したくありません。私が望む効果はデフォルトの動作ではなく、これにはトリッキーなCSS/HTMLの魔法が必要になることをよく知っています。しかし、それは可能かもしれないと私は感じています。それを行う方法が思いつかない場合は、わざわざ回答を送信しないでください。あなたがそれを行う方法を理解するまで、すべては不可能です。

4

6 に答える 6

18

これは@albertが行っていたことのバリエーションです。p:after{}トリックを使用しますが、異なるdisplay. 動作する<p>必要があるようposition:relative;です。

<style>
p{position:relative; display:inline}
p:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}
</style>
<p>first line of test text which is long enough to stretch onto a second line .</p>

http://jsfiddle.net/VHdyf/

このアプローチの優れた点の 1 つは、ほとんどの場合、border-bottom私が好んで使用する をまだ使用していることです。underline

于 2013-03-03T01:08:36.777 に答える
5

css で生成されたコンテンツを使用して効果を得ることができます。私はjsfiddleで例を設定しましたが、基本的にはボーダーを追加しp:after{}ます; この例では、ボーダーが全体に広がっています。これは望ましくないように見えますが、これは、親コンテナーがデモ用のバニラであるためです。あなたの状況に適応できるはずだと思います。ここに行きます：http://jsfiddle.net/jalbertbowdenii/bJ9D4/

于 2013-03-03T00:43:02.877 に答える
2

免責事項：これは不可能な可能性がありますが、この回答は、作業コードよりも大声で考えている/探し始める場所の提案であると考えてください。

テキストの行を (背景色と一致する色で) 強調表示し、下の行の背景が下線と重なるように行の高さを調整する可能性はありますか?

写真は百聞は一見に如かずので、以下をご覧ください。

前：
ここに画像の説明を入力

後：
ここに画像の説明を入力

これらのモックアップから、いくつかの注意点があり、求められているものと正確に一致しないことがわかりますが、おそらくこれは出発点です..?

于 2013-03-03T10:59:35.963 に答える
-1

これによれば：

<p> 要素の最後の行を選択する

JavaScript を使わないとできません。

于 2013-03-03T00:13:07.900 に答える