HTML5中的文本高亮

我正在尝试使用uni代码编写一个telugu文本，以便我可以通过根据声音更改为多种颜色来突出显示文本。对于我使用HTML5和JSHTML5中的文本高亮

<div class="pa">&#3114;</div> 
<div class="paa">&#3114;&#3134;</div>

使用

$("#paa").animate({ color: "blue" }, 500);

我可以改变信的整个颜色，但现在我想强调的是信的某些部分。请建议如何完成。

来源

2015-03-19 priyanka

部分？如果单词的一部分只是用以下方式表示单词：' a w'等，以便您可以选择不同的所有跨度。 – Persijn 2015-03-19 12:43:57

嗨，Persijn，谢谢你。但我只想强调一部分信件。 – priyanka 2015-03-19 12:45:18

你可以做的是，你可以从整个字母中搜索一些文本或单词，并用一些特定的元素和类来替换搜索结果，并给出该类的CSS以突出特定部分。 – 2015-03-19 12:46:33

有几个css技巧来伪造background-clip：text;或类似SVG的东西。

span { 
 
    position:relative; 
 
    color:green; 
 
} 
 
span:before { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    overflow:hidden; 
 
    content:attr(data-text); 
 
    color:blue; 
 
    height:0.7em; 
 
    overflow:hidden; 
 
    animation: txtclr 4s infinite; 
 
} 
 
p { 
 
    background:yellow; 
 
    color:rgba(128, 0, 128 , 0.5); 
 
    font-size:2em; 
 
    font-weight:bold; 
 
    background:linear-gradient(to bottom,lightgray 50%,yellow 50%); 
 
    display:table;/* demo purpose to shrink to text size*/ 
 
    box-shadow:inset -3em 0 rgba(100,100,100,0.5); 
 
    
 
} 
 
@keyframes txtclr { 
 
    0% { 
 
    height:50%; 
 
    } 
 
    25%,75%{ 
 
    height:0; 
 
    width:0; 
 
    } 
 
    50%{ 
 
    height:100%; 
 
    } 
 
}

<p><span data-text="my text">my text</span> and some other text </p>

运行的代码片断，看到绿色的文字填充蓝色从上到下。

没有前缀加，后来的浏览器并不需要它:)这个词的字母或部分

来源

2015-03-19 13:28:52

对于这个问题，我想添加一个图像参考，但因为我的声望很低这不允许我发布。 – priyanka 2015-03-25 12:02:18

如果您想在代码中动态突出显示，我会使用JavaScript框架工作Highlight.js。它非常轻巧，易于使用。下面是使用jQuery和基因敲除样品小提琴： $('.searchme').highlight('high'); sample

来源

2015-03-19 13:11:36 Vlad

你的意思是这样的？只使用CSS来将文本流过它，在这个示例中不需要javascript ;-)但是您可以随时切换出具有所需效果的类。

它所做的是使用transition属性，它允许它在诸如悬停之类的事件之后在不同的css状态之间进行动画处理，单击active等。

要突出显示一个字母的一部分，您需要添加该HTML元素两次。我用彩色和朴素做了什么。这也适用于单个字母。您需要将它们设置为绝对位置并将它们包裹在相对的div中。通过这样做，他们将自己定位到相对包装div的左上角位置（在我的示例中）。这样，您就可以保持文本流，如果您使用的是<span>的包装FO例如

然后，设置一个宽度0或者你想让它掩盖了其他盘符半

在我的例子无论宽度仅Y的一半是红色的，另一半（一半是）不是红色的。

如果你想覆盖上半部分，你可以玩高度。

http://jsfiddle.net/L9L8L966/1/

#container { 
 
     font-size:40px; 
 
     position:relative; 
 
     background-color:#CCC; 
 
     width:450px; 
 
     height:40px; 
 
    } 
 
    #coloured { 
 
     position:absolute; 
 
     z-index:2; 
 
     top:0px; 
 
     left:0px; 
 
     display:block; 
 
     width:0%; 
 
     -webkit-transition: width 1s ease-in-out; 
 
     -moz-transition: width 1s ease-in-out; 
 
     -o-transition: width 1s ease-in-out; 
 
     transition: width 1s ease-in-out; 
 
     color:red; 
 
     overflow:hidden; 
 
    } 
 
    #container:hover #coloured { 
 
     width:100%; 
 
    } 
 
    #plain { 
 
     position:absolute; 
 
     z-index:1; 
 
     width:100%; 
 
     display:block; 
 
     top:0px; 
 
     left:0px; 
 
     color:black; 
 
    }

<div id="container"> 
 
     <div id="coloured"> 
 
      abcdefghijklmnopqrstuvwxyz 
 
     </div> 
 
     <div id="plain"> 
 
      abcdefghijklmnopqrstuvwxyz 
 
     </div> 
 
    </div>

来源

2015-03-19 13:12:03 Tschallacka

这是可行的，但不是所有的语言容易。在下面的例子中，我在某些字母上点了口音。 http://jsfiddle.net/07hh3z2n/5/

提示是使用CSS获得没有宽度的inline-block。

.phantom { 
    display: inline-block; 
    color: red; 
    width: 0; 
    overflow: visible; 
}

如果您想要突出显示的部分是现有的unicode字符，这将工作正常。否则，您可以尝试使用（或创建）带有字母部分的特殊字体来突出显示。

来源

2015-03-19 13:20:42 Tolokoban

HTML5中的文本高亮

回答

相关问题