Javascript 可以将CSS应用于半个字符吗？

我在寻找什么：

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

.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;
}

为一个字符的一半设置样式的方法。（在这种情况下，一半的字母是透明的）

我目前搜索和尝试的内容（运气不佳）：

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

.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;
}

• 设置半个字符/字母样式的方法
• 使用CSS或JavaScript设置角色的部分样式
• 将CSS应用于50%的字符

下面是我试图获得的一个例子

是否存在CSS或JavaScript解决方案，或者我将不得不求助于图像？我不想走图像路线，因为这个文本最终会被动态生成

---

更新：

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

.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;
}

既然有很多人问我为什么要设计一个角色的一半，这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这就是他们想到的。许多人抱怨简单和缺乏创造力，并继续这样做。我的目标是把这个当作一个笑话。输入“哈利法克斯”，你就会明白我的意思。

我能找到的最接近的：

$（函数（）{
$（'span'）.width（$（'span'）.width（）/2）；
$（'span:nth child（2）'）.css（'text-indent'，-$（'span'）.width（））；
});
正文{
字体系列：arial；
}
跨度{
显示：内联块；
溢出：隐藏；
}
跨度：第n个孩子（2）{
颜色：红色；
}

XX




我刚刚完成了插件的开发，它可供所有人使用！希望你会喜欢

在上查看项目-查看项目。（因此可以查看所有拆分样式）
用法
首先，确保包含
jQuery
库。获取最新jQuery版本的最佳方法是使用以下内容更新头标签：

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

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

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

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

// 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);
}

<span>A</span>

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

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

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

// 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);
}

<span>A</span>



就这样！现在您已经设置了
Splitchar
插件。更多信息请访问。


我们只需要使用CSS伪选择器就可以了

这种技术可以处理动态生成的内容以及不同的字体大小和宽度

HTML:

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

.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;
}

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

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

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

// 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);
}

<span>A</span>

有限的CSS和jQuery解决方案

我不确定这个解决方案有多优雅，但它将所有内容一分为二：

否则，我已经为您创建了一个很好的解决方案。。。您所需要做的就是将以下内容用于HTML：

看看这篇截至2016年6月13日的最新、准确的编辑：

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


$（函数（）{
变量$hc=$（'.half color'）；
var str=$hc.text（）；
$hc.html（“”）；
var i=0；
var-chars；
var-dupText；
而（i
。半色范围{
字号：2em；
显示：内联块；
溢出：隐藏；
}
.半色跨度：第n个子级（偶数）{
颜色：红色；
}

这是一句话
自由地去叉和改进

||（重定向到GitHub）


单个字符的纯CSS
用于跨文本或多个字符实现自动化的JavaScript
为盲人或视觉障碍者保留屏幕阅读器的文本可访问性
受损

第1部分：基本解决方案

演示：


这适用于任何动态文本或单个字符，并且是全自动的。您所需要做的就是在目标文本上添加一个类，其余的就完成了

此外，为盲人或视力受损者的屏幕阅读器保留了原始文本的可访问性

单个字符的解释：

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

.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;
}

纯CSS。您所需要做的就是将
.halfStyle
类应用于包含要设置半样式的字符的每个元素

对于包含字符的每个span元素，您可以创建一个数据属性，例如在这里
data content=“X”
，并在伪元素上使用
content:attr（数据内容）.halfStyle:before
类将是动态的，您不需要为每个实例硬编码

任何文本的解释：

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

.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;
}

只需将
textToHalfStyle
类添加到包含文本的元素中



//自动模式的jQuery
jQuery（函数（$）{
变量文本，字符，$el，i，输出；
//迭代所有类的出现
$（'.textToHalfStyle'）。每个（函数（idx，el）{
$el=$（el）；
text=$el.text（）；
字符=文本分割（“”）；
//设置屏幕阅读器文本
$el.html（“”+文本+“”）；
//重置附加的输出
输出=''；
//迭代文本中的所有字符
对于（i=0；i
.halfStyle{
位置：相对位置；
显示：内联块；
字体大小：80px；/*或任何字体大小均可*/
颜色：黑色；/*或透明，任何颜色*/
溢出：隐藏；
空白：pre；/*以防止空间塌陷*/
}
.halfStyle:以前{
显示：块；
z指数：1；
位置：绝对位置；
排名：0；
左：0；
宽度：