【问题标题】:How to highlight different parts of text with multiple colors in HTML如何在 HTML 中用多种颜色突出显示文本的不同部分
【发布时间】:2020-04-27 14:42:29
【问题描述】:

假设我们有一段文本,我们想用不同的颜色突出显示文本的不同部分,如下所示:

突出显示可以包括文本跨度之间的潜在重叠,如上例所示。我只是想知道我需要使用/利用什么样的技术来实现这一目标?我是否应该围绕 CSS 和 HTML 来了解如何在我的 HTML 中为 spanmark 标记定义一个类?或者有什么免费的东西可以使用,这样我就可以生成带有适当标签的文本并将其放入我的 HTML 中以生成彩色文本?

我的模板在HTML5

【问题讨论】:

  • 除非您使用定位重叠元素,否则您不能这样做。
  • @Paulie_D 如果我们忽略重叠而只想用不同颜色突出显示文本跨度怎么办?如果你给我一个例子来说明你使用定位重叠元素的意思,那也很好。

标签: html css highlight


【解决方案1】:

这是一个看似简单但事实证明并不重要的问题。您不能尝试部分重叠元素,因为它们会与一个完全包含在另一个中的元素级联。以下不突出以紫色开头的句子,以紫色和绿色为中间,以绿色结尾的句子。相反,它用紫色突出整个句子,用绿色突出中间部分。

<span class="purple">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="green">sed do eiusmod tempor incididunt ut</span> labore et dolore magna aliqua.</span>

虽然可以使用定位将适当大小的高光放置在重叠的位置,但这种方法很难做出响应。

相反,我通过完全封闭另一个突出显示标记来实现这种外观,其中两个突出显示重叠,然后在前一个突出显示之后立即开始另一个突出显示。

因为你想要的外观有圆角,应该只出现在突出显示的开始和结束处,我使用startend 类来指示封闭重叠突出显示的开始和结束位置。

.highlight {
    font-size: 18px;
    line-height: 36px;
}
.highlight span {
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    border-radius: 5px;
}
.highlight span span {
    margin: 0 -3px;
}
.highlight .start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.highlight .end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.highlight .purple {
    background-color: rgba(0, 0, 255, 0.15);
    border-color: rgba(0, 0, 255, 0.5);
}
.highlight .green {
    background-color: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
}
.highlight .orange {
    background-color: rgba(255, 150, 0, 0.15);
    border-color: rgba(255, 150, 0, 0.5);
}
.highlight .red {
    background-color: rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.5);
}   
.highlight .yellow {
    background-color: rgba(255, 255, 0, 0.15);
    border-color: rgba(255, 255, 0, 0.5);
}
.highlight .blue {
    background-color: rgba(0, 150, 255, 0.15);
    border-color: rgba(0, 150, 255, 0.5);
}
<div class="highlight">
    <span class="purple">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="green start">sed do eiusmod tempor incididunt ut</span></span><span class="green end"> labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud <span class="orange">exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> Duis aute irure dolor in reprehenderit in voluptate velit esse <span class="red">cillum dolore eu fugiat nulla pariatur. <span class="yellow start">Excepteur sint</span></span><span class="yellow end"> occaecat cupidatat non proident, <span class="blue start">sunt in culpa qui officia</span></span><span class="blue end"> deserunt mollit anim id est laborum.</span>
</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-11-06
    • 2012-09-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-17
    • 2020-11-30
    相关资源
    最近更新 更多