JSFiddle演示

我们将只使用CSS伪选择器来实现！

该技术将使用动态生成的内容和不同的字体大小和宽度。

HTML格式：

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span {
    white-space: pre-line;
    position: relative;
    color: #409FBF;
}

.split-color > span:before {
    content: attr(data-content);
    pointer-events: none;  /* Prevents events from targeting pseudo-element */
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;
}

要包装动态生成的字符串，可以使用如下函数：

// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
  var output = [];
  str.split('').forEach(function(letter) {
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;

    output.push(wrapper.outerHTML);
  });

  return output.join('');
}

// Replace the original text with the split-color text
window.onload = function() {
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;
    
    el.innerHTML = wrapString(txt);
}

这是一个仅针对整行文本的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>

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

在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/.

有限的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>

我刚刚玩了@Arbel的解决方案：

var textToHalfStyle=$（'.textToHalfStyle'）.text（）；var textToHalfStyleChars=textToHalf-Style.split（“”）；$（'.textToHalfStyle'）.html（''）；$.each（textToHalfStyleChars，函数（i，v）{$（'.textToHalfStyle'）.append（'<span class=“halfStyle”data content=“'+v+'”>'+v+'</span>'）；});正文{背景色：黑色；}.text转换为半样式{显示：块；边距：200px 0 0；文本对齐：居中；}半样式{字体系列：'Libre Baskerville'，衬线；位置：相对；显示：内联块；宽度：1；字体大小：70px；颜色：黑色；溢出：隐藏；空白：pre；文本阴影：1px 2px 0白色；}半样式：之前{显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：属性（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：白色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js“></script><span class=“textToHalfStyle”>Dr。Jekyll和M.Hide</span>

像这样的短文本怎么样？

如果你使用循环，用JavaScript重复字符，它甚至可以处理更长的文本。总之，结果是这样的：

邮政编码{位置：相对；显示：内联块；字体大小：60px；颜色：红色；}p.char:之前{位置：绝对；内容：属性（字符）；宽度：50%；溢出：隐藏；颜色：黑色；}<p class=“char”char=“S”>S</p><p class=“char”char=“t”>t</p><p class=“char”char=“a”>a</p><p class=“char”char=“c”>c</p><p class=“char”char=“k”>k</p><p class=“char”char=“o”>o</p><p class=“char”char=“v”>v</p><p class=“char”char=“e”>e</p><p class=“char”char=“r”>r</p><p class=“char”char=“f”>f</p><p class=“char”char=“l”>l</p><p class=“char”char=“o”>o</p><p class=“char”char=“w”>w</p>