如何设置文本修饰:仅针对特定内容加下划线

Question

我有一个输入标签,我得到这样的输入值.

input.value += " " + value + ";" ;

在我的css我有,text-decoration: underline;但在这里下划线是在"空间"和";" 这两个地方.有什么方法我可以只装饰文字部分.

我的代码就像:

var div = document.getElementById(divID);

var myTable = '<input type="text" id="myInput"  list="myUL" onclick = "openingList()" onkeyup="openingList()" style="width:30%;" >' +
    '<div id="triggers">' + '<img class="trigger" onclick ="deleteValue()" src="css/clearT.png" id="cross" />' + '<img class="trigger" src="css/combo_arrow.png" onclick = "openingList()" id="arrow" />' + '</div>' +
    '<ul id="myUL" hidden=true>' + '<li>' + '<a href="#" ></a>' + '</li>' + '</ul>';

div.innerHTML = myTable;

function selectItem(input, value) {
    var newinput = input.value.split(';');
    newinput[newinput.length - 1] = "";
    input.value = newinput.join(";");
    input.value += " " + value + ";" + "";    
}

目前它是这样的.

我究竟想要什么

Answer 1

尝试这个概念: https ://jsfiddle.net/uza1pbnw/

示例 - 使用Pure JS的1

var text = "How are you doing today?";
text = text.split(" ");
    len = text.length,
    result = []; 

for( var i = 0; i < len; i++ ) {
    result[i] = '<span>' + text[i] + '</span>';     
}   

console.log(result.join(' '));

示例 - 使用JQuery的2

HTML

<p>hello world text done</p>

CSS

<style>
    p span {
        text-decoration: underline;
    }

</style>

JS

<script>
    $('p').each(function() {
        var text = $(this).html().split(' '),
            len = text.length,
            result = [];

        for (var i = 0; i < len; i++) {
            result[i] = '<span>' + text[i] + '</span>';
        }
        $(this).html(result.join(' '));
    });

</script>

https://jsfiddle.net/princesodhi/0h8oqknz/4/

Answer 2

您可以使用text-decoration-skip

text-decoration-skip: spaces

但并非所有主要浏览器都支持它。