加下划线的前n个字符

本文介绍了加下划线的前n个字符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想在链接中突出显示单词中的前几个字符，类似于CSS首字母的工作原理，但字母数量可变。或者，强调单词的前半部分可能很有用。任何方式相对简单地用HTML，CSS或Javascript来做到这一点？

（我不是开发人员，对所有人以及任何建议都愿意接受开发团队;）

解决方案

< a href =＃class =underline>这是文字。< / a>< br /> < a href =＃class =underline>更多文字。< / a>< br /> < a href =＃class =>无下划线。< / a>< br /> < a href =＃class =underline>给我加下划线。< / a>< br /> < a href =＃class => Nada here though。< / a>< br /> a， a.underline { text-decoration：none; } 。下线跨度{颜色：绿色; text-decoration：下划线; } var links = document.links; var chars = 3; （链接[i] .className.indexOf（'underline'）>）的 （var i = 0，total = links.length; i< total; i ++） -1）{ var text = links [i] .innerHTML; text ='< span>'+ text.substring（0，chars）+ '< / span>'+ text.substring（chars）; links [i] .innerHTML = text; } }

jsfiddle/hMEHB/

编辑：单词。

var links = document.links; var chars = 3; （链接[i] .className.indexOf（'underline'）>）的 （var i = 0，total = links.length; i< total; i ++） -1）{ var text = links [i] .innerHTML.split（''）; for（var p = 0，words = text.length; p jsfiddle/hMEHB/1/

编辑：作为一个函数。

var links = document.links; var chars = 2; （链接[i] .className.indexOf（'underline'）>）的 （var i = 0，total = links.length; i< total; i ++） -1）{ setUnderline（links [i]，chars）; 函数setUnderline（link，chars）{ var text = link.innerHTML.split（''）; for（var p = 0，words = text.length; p jsfiddle/hMEHB/2/

I'd like to underline the first few characters of words in a link, similar to how CSS first-letter works but with a variable number of letters. Alternatively, underlining the first half of a word's letters could be useful. Any way to do this relatively simply with HTML, CSS or Javascript?

(I'm no developer, and am open to all and any suggestions to pass on to the development team ;)

解决方案

<a href="#" class="underline">This is text.</a><br/> <a href="#" class="underline">More text.</a><br/> <a href="#" class="">No underline.</a><br/> <a href="#" class="underline">Underline me.</a><br/> <a href="#" class="">Nada here though.</a><br/> a, a.underline { text-decoration: none; } .underline span { color: green; text-decoration: underline; } var links = document.links; var chars = 3; for (var i = 0, total = links.length; i < total; i++) { if (links[i].className.indexOf('underline') > -1) { var text = links[i].innerHTML; text = '<span>' + text.substring(0, chars) + '</span>' + text.substring(chars); links[i].innerHTML = text; } }

jsfiddle/hMEHB/

EDIT: Words.

var links = document.links; var chars = 3; for (var i = 0, total = links.length; i < total; i++) { if (links[i].className.indexOf('underline') > -1) { var text = links[i].innerHTML.split(' '); for (var p = 0, words = text.length; p < words; p++) { text[p] = '<span>' + text[p].substring(0, chars) + '</span>' + text[p].substring(chars); } links[i].innerHTML = text.join(' '); } }

jsfiddle/hMEHB/1/

EDIT: As a function.

var links = document.links; var chars = 2; for (var i = 0, total = links.length; i < total; i++) { if (links[i].className.indexOf('underline') > -1) { setUnderline(links[i], chars); } } function setUnderline(link, chars) { var text = link.innerHTML.split(' '); for (var p = 0, words = text.length; p < words; p++) { text[p] = '<span>' + text[p].substring(0, chars) + '</span>' + text[p].substring(chars); } link.innerHTML = text.join(' '); }

jsfiddle/hMEHB/2/