您可以使用以下代码。在此示例中，我使用了h1标记，并添加了一个属性数据title text=“Display text”，它将在h1标记文本元素上显示不同颜色的文本，这会产生如下示例所示的半彩色文本效果

正文{文本对齐：居中；边距：0；}h1小时{颜色：#111；字体系列：arial；位置：相对；字体系列：“Oswald”，无衬线；显示：内联块；字体大小：2.5em；}h1:：之后{content:attr（数据标题文本）；颜色：#e554e；位置：绝对；左：0；顶部：0；剪辑：矩形（0，1000px，30px，0）；}<h1 data title text=“显示文本”>显示文本</h1>

有限的CSS和jQuery解决方案

我不知道这个解决方案有多优雅，但它将所有事情都削减了一半：http://jsfiddle.net/9wxfY/11/

否则，我为您创建了一个很好的解决方案。。。您需要做的就是为HTML设置以下内容：

请查看截至2016年6月13日的最新且准确的编辑：http://jsfiddle.net/9wxfY/43/

至于CSS，它非常有限。。。您只需将其应用于：第n个孩子（偶数）

$（函数）{var$hc=$（'.half color'）；var str=$hc.text（）；$hc.html（“”）；变量i=0；var字符；var dupText；而（i<str.length）{chars=str[i]；如果（chars==“”）chars=“”；dupText=“<span>”+字符+“</span>”；var firstHalf=$（dupText）；var secondHalf=$（dupText）；$hc.append（前半部分）$hc.append（secondHalf）var width=firstHalf.width（）/2；firstHalf.width（宽度）；secondHalf.css（'text-indent'，-width）；i++；}});半色跨度{字体大小：2em；显示：内联块；溢出：隐藏；}半色跨度：第n个子级（偶数）{颜色：红色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script>这是一个句子</div>

这是一个仅针对整行文本的CSS解决方案，而不仅仅是字符元素。

第二部分{位置：相对；顶部：2米；高度：2米；文本转换：全宽；}div：之前，div:之后{content:attr（数据内容）；位置：绝对；顶部：0；右：0；底部：0；左：0；}div:之后{颜色：红色；/*单个字符的掩码。通过重复此掩码，所有字符串都将被掩码*/-webkit掩码图像：线性渐变（向右，透明0，透明.5em，白色.5em，白1em）；-webkit掩码重复：repeat-x；/*向右重复面罩*/-webkit掩码大小：1em；/*单个字符的相对宽度*//*非供应商掩码设置*/遮罩图像：线性渐变（向右，透明0，透明.5em，白色.5em，白1em）；掩码重复：repeat-x；掩模尺寸：1em；}/*演示目的*/input[name=“fontSize”]：第一个类型：checked ~ div{字体大小：1em；}input[name=“fontSize”]：第一个类型+input:checked ~ div{字体大小：2em；}input[name=“fontSize”]：第一个类型+input+input：checked ~ div{字体大小：3em；}字体大小：<input type=“radio”name=“fontSize”value=“1em”><input type=“radio”name=“fontSize”value=“2em”checked><input type=“radio”name=“fontSize”value=“3em”><div data content=“仅限CSS的解决方案…”></div><div data content=“在Firefox上试用！”></div>

其想法是为每个字符应用一个水平CSS掩码，隐藏其前半部分[0-0.5em]，并显示后半部分[0.5em-1em]。

掩码的宽度为掩码大小：1em，以匹配字符串中第一个字符的宽度。通过使用掩码repeat:repeat-x，相同的掩码将应用于第二个、第三个字符，依此类推。

我原以为使用单格字体可以解决使用相同宽度字母的问题，但我错了。相反，我通过使用文本转换解决了这个问题：我相信，不幸的是，只有Firefox才支持全宽度。

使用相对单位em允许设计根据字体大小进行放大/缩小。

适用于所有浏览器的Vanilla JavaScript解决方案

如果Firefox不是一个选项，那么使用此脚本进行救援。

它通过为每个字符插入子跨度来工作。在每个span中，从字母的宽度（即span元素的宽度）[0%-50%]和[50%-100%]处放置一个非重复CSS掩码。

这样，我们就不再有使用相同宽度字符的限制。

常量dataElement=document.getElementById（“data”），content=dataElement.textContent，zoom=功能（fontSize）{dataElement.style['font-size']=fontSize+'em'；};while（dataElement.firstChild）{dataElement.firstChild.remove（）}对于（var i=0；i<content.length；++i）{常量spanElem=document.createElement（'span'），ch=含量[i]；spanElem.setAttribute（'data-ch'，ch）；spanElem.appendChild（document.createTextNode（ch==''？'\u00A0'：ch））；data.appendChild（spanElem）；}#数据{位置：相对；顶部：2米；高度：2米；字体大小：2em；}#数据跨度{显示：内联块；位置：相对；颜色：透明；}#数据跨度：之前，#数据范围：之后{content:attr（数据ch）；显示：内联块；位置：绝对；顶部：0；右：0；底部：0；左：0；文本对齐：居中；颜色：初始；}#数据范围：之后{颜色：红色；-webkit掩码图像：线性渐变（向右，透明0，透明50%，白色50%，白色100%）；掩模图像：线性梯度（向右，透明0，透明50%，白色50%，白色100%）；}字体大小：<input-type=“range”min=1 max=4 step=0.05 value=2 oninput=“zoom（this.value）”onchange=“zoom（this.value）”>＜div id=“data”＞后备解决方案。。。对于所有浏览器</div>

这可以通过CSS:before选择器和内容属性值来实现。

减半，减半1{浮动：左侧；}减半，减半1{字体系列：arial；字体大小：300px；字号：粗体；宽度：200px；高度：300px；位置：相对；/*帮助保持内容价值*/溢出：隐藏；颜色：#000；}.halved:之前，.halved1:之前{宽度：50%；/*我们想展示多少*/溢出：隐藏；/*隐藏超出我们维度的内容*/内容：'X'；/*半字符*/高度：100%；位置：绝对；颜色：#28507D；}/*对于水平截止*/half-ed1:之前{宽度：100%；高度：55%；}<div class=“half-ed”>X</div><div class=“halved1”>X</div>

>>参见jsFiddle

我刚刚完成了插件的开发，每个人都可以使用它！希望你会喜欢。

在GitHub上查看项目-查看项目网站。（这样可以查看所有拆分样式）

用法

首先，确保包含jQuery库。获取最新jQuery版本的最佳方法是使用以下内容更新head标记：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

下载文件后，确保将其包含在项目中：

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

加成

您所要做的就是为包装文本的元素添加splitchar类，然后添加所需的样式。例如

<h1 class="splitchar horizontal">Splitchar</h1>

完成所有这些之后，只需确保在文档就绪文件中调用jQuery函数，如下所示：

$(".splitchar").splitchar();

自定义

为了使文本看起来完全符合您的要求，您所要做的就是像这样应用您的设计：

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }

就是这样！现在您已经设置了Splitchar插件。有关它的更多信息，请访问http://razvanbalosin.com/Splitchar.js/.

如果您愿意，也可以使用SVG执行此操作：

var title=document.querySelector（'h1'），text=title.innerHTML，svgTemplate=document.querySelector（'svg'），charStyle=svgTemplate.querySelector（'#text'）；svgTemplate.style.display=“块”；var空间=0；对于（var i=0；i<text.length；i++）{var x=charStyle.cloneNode（）；x.text内容=文本[i]；svgTemplate.appendChild（x）；x.setAttribute（'x'，空格）；space+=x.clientWidth||15；}title.innerHTML=“”；title.appendChild（svgTemplate）；<svg style=“display:none；height:100px；width:100%”xmlns=“http://www.w3.org/2000/svg“xmlns:svg=”http://www.w3.org/2000/svg“xmlns:xlink=”http://www.w3.org/1999/xlink“版本=”1.1“><defs id=“FooDefs”><linearGradient id=“MyGradient”x1=“0%”y1=“0%”x2=“100%”y2=“0”><停止偏移=“50%”停止颜色=“蓝色”/><停止偏移=“50%”停止颜色=“红色”/></linearGradient></defs><text y=“50%”id=“text”style=“font-size:72px；fill:url（#MyGradient）”></text></svg><h1>这不是解决方案X</h1>

http://codepen.io/nicbell/pen/jGcbq