将单词直接放在其他单词之下或之上

Question

我希望在div代码中执行以下操作：

使用span s对单词进行不同的着色。

我将在文本框中输入一些文字，并通过JavaScript我需要动态更新到div以显示类似上面的内容。

这样做的最佳方式是什么？

它是否涉及等宽字体？

是否涉及撰写“隐藏”文字？

我希望以这种方式完成整个段落。

这可能看起来很奇怪，但我正在做的研究要求我提供具有多种颜色的给定文本中的某些单词，我认为这可能是传达这些信息的好方法。

更新文本框中的文本将更新以下变量，反过来我需要将这两个变量转换为类似上图的内容。

text = "I am under the text above me and there is lots more text to come./n I am even moving onto a new line since I have more text"

color_per_word_position =  {0:green, 1: red, 2: cyan, 4: yellow, 5: red, ...}

Answer 1

使用填充这是可能的，但也可以通过为选择器指定文本来进行绝对控制，例如“p”用于类：小提琴http://jsfiddle.net/3NDs3/1/

   .one {
    width:200px;
}
.one p {
    font: normal 14px Futura, sans-serif;
    text-align:left;
    padding-left:130px;
}
.two {
    width:200px;
}
.two p {
    text-align:center;
    font: normal 14px Futura, sans-serif;
}
.three {
    width:200px
}
.three p {
    text-align:left;
    font: normal 14px Futura, sans-serif;
    padding-left:35px;
}


    <div class="one">
    <p>above me</p>
</div>
<div class="two">
    <p>i am under the text above me</p>
</div>
<div class="three">
    <p>under</p>
</div>

Answer 2

您必须使用等宽字体。*

我基本上看到两个选项：1。使用空格2.边距。

选项1

您的文字看起来像

I•am•under•the•text•above
••am•under•••••text•above

其中•表示空格字符。非常简单的CSS，因为你不必担心间距。浏览器为您完成所有操作。 示例：http://jsfiddle.net/PYXdr/

* _{好吧，有可能使用任何字体，使用大量的JS，但我想这不值得。}

选项2

由于您可能不希望在跨度之间留出空白，因此您可能更喜欢这样：

I•am•under•the•text•above
  am•under     text•above

现在，需要手动处理间距。每个跨度应该得到margin-left，将其推到所需位置。但在我们能够做到这一点之前，我们需要知道一个字符的宽度（使用JS，因为CSS没有提供）。好的，非常简单：

var el = document.createElement('pre');
el.style.display = 'inline-block';
el.innerHTML = ' ';
document.body.appendChild(el);
var width = parseFloat(getComputedStyle(el).width);
document.body.removeChild(el);

现在让我们继续前进并移动跨度：

span1.style.marginLeft = (2 * width) + 'px';
span2.style.marginLeft = (5 * width) + 'px';

示例：http://jsfiddle.net/JC3Sc/

全部放在一起

现在，这是一个如何运作的基本示例：

var text = "I am under the text above me and there is lots more text to come.\nI am even moving onto a new line since I have more text"

var highlightBorders = [[2, 3, 4, 6], [6, 7]]; // YOUR TASK: implement the logic to display the following lines

var color_per_word_position =  {0:'lime', 1: 'red', 2: 'cyan', 3:'orange', 4: 'yellow', 5: 'red'}

/* generate CSS */
var style = document.createElement('style');
for (var i in color_per_word_position) {
    style.innerHTML += '.hl' + i + '{background:' + color_per_word_position[i] + '}';
}
document.head.appendChild(style);


/* generating the text */
text = text.split('\n');
var pre = document.createElement('pre');
text.forEach(function (line, i) {
    var div = document.createElement('div');
    var words = line.split(' ');
    var result = [];
    highlightBorders[i].forEach(function (len, j) {
        var span = document.createElement('span');
        span.innerHTML = words.splice(0, len).join(' ');
        span.className = 'hl' + j;
        if (j) {
            span.style.marginLeft = width + 'px' // YOUR TASK: implement the logic
        }
        div.appendChild(span);
    });
    pre.appendChild(div);
});

document.body.appendChild(pre);

这不是一个完整的解决方案，因为a）我没有真正看到你要突出的部分和b）我不想破坏所有的乐趣。但是你明白了。

示例：http://jsfiddle.net/tNyqL/