2011-07-25 7 views
6

Tengo una página web HTML & JS.Cómo poner una línea ondulada debajo de las palabras mal escritas HTML

Necesito agregar una línea agitada roja debajo de las palabras mal escritas. Obtuve mi algoritmo para detectar esas palabras, pero solo necesito saber cómo poner una línea agitada debajo de esas palabras.

+9

¿Quieres decir mal escrito? –

+1

¿Por qué una línea ondulada? ¿Por qué no una gruesa línea punteada, como cualquier otro programa? – Sparky

+3

@ Sparky672 porque la mayoría de los programas usan líneas onduladas? –

Respuesta

13

En realidad no tienen un subrayado rizado norma sólo mediante el uso de CSS, pero consulte este tutorial sobre cómo crear uno usted mismo:

Tomado de aquí: http://www.phpied.com/curly-underline/

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

lol awesome tut –

+0

Tan simple +1. Buena idea. –

16

Si no' t quiere utilizar un gif para el subrayado rizado, puede hacerlo por puro CSS:

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

(o ejecutar en JSFiddle)

+3

AW SNAP magia visualmente engañosa! –

4

Rojo, subrayado ondulado es muy simple, como se especifica en CSS 3 de Text Decoration Module.

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

apoyo Browser es ponerse al día. Puede vote for it para Microsoft Edge, que le recomiendo que haga.

La especificación no es nueva; Firefox lo ha estado apoyando since 2011 y Chrome desde 2016. Afortunadamente, podemos contar con que Safari y Edge también lo admitirán pronto.

Actualización 2017: Chrome ha cerrado el problema en 2016, y lo he probado con Chrome 58, que funciona, y es un gran impulso de las líneas onduladas.

+0

Parece terrible en Chrome, incluso la solución punteada se ve mejor. ¿No pueden aprender de la década de 1980 Microsoft Word? – Pacerier

Cuestiones relacionadas