html - 将单词直接放在其他单词的下方或上方

Question

我希望在div标签中执行以下操作：

单词将使用spans 以不同的颜色着色。

我将在一个文本框中得到一些文本，并通过 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

Answer 2

使用填充这是可能的，但也可以通过将文本分配给类的选择器（例如“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>