加下划线的前n个字符 [英] Underline first n characters of words

问题描述

我想在链接中突出显示单词中的前几个字符，类似于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;
}
}


http://jsfiddle.net/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  text [p] ='< span>'+ 
 text [p]。 substring（0，chars）+ 
'< / span>'+ 
 text [p] .substring（chars）; 
} 
 links [i] .innerHTML = text.join（''）; 
} 
} 
  

http://jsfiddle.net/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  text [p] ='< span>'+ 
 text [p]。 substring（0，chars）+ 
'< / span>'+ 
 text [p] .substring（chars）; 
} 
 link.innerHTML = text.join（''）; 
} 
  

http://jsfiddle.net/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;
    }
}

http://jsfiddle.net/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(' ');
    }
}

http://jsfiddle.net/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(' ');
}

http://jsfiddle.net/hMEHB/2/

这篇关于加下划线的前n个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！