2011-07-25 9 views
6

私はウェブページHTML & JSを持っています。綴り間違った単語の下に波線を付ける方法HTML

スペルミスのある単語の下に赤い波線を追加する必要があります。 私はそれらの単語を検出するために私のアルゴリズムを持っていましたが、私はちょうどそれらの単語の下に波線を置く方法を知る必要があります。

+9

スペルミスを意味しますか? –

+1

なぜ波打った線ですか?なぜ、他のすべてのプログラムと同様に、太い破線はありませんか? – Sparky

+3

@ Sparky672ほとんどのプログラムでは波線が使用されていますか? –

答えて

13

は実際にあなただけのCSSを使用することにより、標準的な巻き毛の下線を持っていますが、自分でものを作成する方法については、このチュートリアルをチェックしない:

ここから撮影:http://www.phpied.com/curly-underline/

.curly-underline { 
    background: url(underline.gif) bottom repeat-x; 
} 
+0

lol awesome tut –

+0

シンプルな+1。良いアイデア。 –

16

あなたは「ドン場合カーリー下線のためのGIFを使用したTたいが、あなたは純粋なCSSでそれを行うことができます。

<span style="border-bottom: 1px dotted #ff0000;padding:1px"> 
 
    <span style="border-bottom: 1px dotted #ff0000;"> 
 
     foobar 
 
    </span> 
 
</span>

(またはJSFiddleで実行)

+3

AW SNAP視覚的に欺瞞的な魔法! –

4

CSS 3のText Decoration Moduleに指定されている赤、波線は、非常に簡単です。

* { text-decoration: underline wavy red; }
Run me in Chrome or Firefox to see me ride over a red wave!

ブラウザのサポートが追いついています。 Microsoft Edgeの場合はvote for itですが、お勧めします。

仕様は新しくはありません。 Firefoxは、since 2011、Chromeは2016年からサポートしています。 SafariとEdgeもすぐにサポートできると期待しています。

Update 2017:Chromeは2016年に問題を解決しました。Chrome 58で動作確認済みですが、波線の大きなブーストです。

+0

Chromeでひどいように見えますが、点線で表示された解決策もよく見えます。彼らは1980年代のMicrosoft Wordから学ぶことができませんか? – Pacerier

関連する問題