是否可以将 CSS 应用于字符的一半？

【问题标题】：Is it possible to apply CSS to half of a character?是否可以将 CSS 应用于字符的一半？
【发布时间】：2017-06-06 18:57:51
【问题描述】：

我在寻找什么：

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

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

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

以下是我想要获得的示例。

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

更新：

既然很多人问我为什么要设计半个角色的样式，这就是原因。我的城市最近花了 250,000 美元为自己定义一个新的“品牌”。这 logo 是他们想出的。许多人抱怨简单和缺乏创造力，并继续这样做。我的目标是想出这个 website 作为一个笑话。输入“Halifax”，你就会明白我的意思了。

【问题讨论】：

  • 评论不用于扩展讨论；这个对话是moved to chat。
  • 他们问“为什么”，因为他们想知道为什么你会使用 CSS 而不是使用 SVG 或图像编辑器。与有关其徽标的业务决策无关。根据您指向他们徽标的链接，您为什么不直接裁剪 X？
  • 在将其中一些方法应用于您的文本之前，请考虑可访问性。下面提到的方法非常令人沮丧，因为它们不能提高视力差、学习障碍、失语、阅读障碍或成人识字率低的人的易读性和可读性。有一些需要遵循的指导方针，甚至谷歌宣布将根据网站对 WCAG 规则的遵守情况开始对网站进行排名。很容易与那些使用工具作为斧头的人进行测试。如果使用图像/svg 代替，则两者都需要替代文本来传达所传达的信息。

标签： javascript html css


【解决方案1】：

利用background-clip: text 支持的好解决方案：http://jsfiddle.net/sandro_paganotti/wLkVt/

span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

【讨论】：

    【解决方案2】：

    是的，你可以只用一个字符并且只用 CSS：

    http://jsbin.com/rexoyice/1/

    h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <h1>X</h1>

    从视觉上看，所有使用两个字符的示例（无论是通过 JS、CSS 伪元素还是只是 HTML）看起来都不错，但请注意，所有示例都向 DOM 添加了可能导致可访问性的内容——以及文本选择/剪切/粘贴问题。

    【讨论】：

    • @MathewMacLean 如果只有 IE 死掉并且 Firefox 开始使用 Webkit，我们的工作就会轻松很多。 :)
    • @MattHarrison 嗯。好吧，我猜它不仅仅是 not webkit！ :)
    • WebKit 有呈现几乎 IE6/IE7 级别的怪异错误的历史（你甚至可以说 Safari 和 Chrome 是现代网络的 IE6），并且行为方式与没有特殊原因的标准。 IE 自第 9 版以来已经好多了，所以虽然古老的版本应该已经死了，但我看不出有任何理由憎恨它的最新版本。而且我当然不明白为什么人们支持 WebKit/Blink 单一文化的想法（这里的 cmets 可能是在开玩笑，但我听说过有人认真相信它）。
    • 话虽如此，background-clip: text 非常棒，他们应该考虑将它（或类似 text-decoration-background 的东西）用于第 4 级模块。
    • 是的，如果blink/webkit 死掉而现代IE+FF 渲染引擎幸存下来，我会更高兴。这并不是说 chrome 的其余部分不好，只是它的渲染几乎是当今最糟糕的。
    【解决方案3】：

    注意：这仅适用于一个字符，但如果您想要更多字符，请为每个信号字符添加一个类。并且您可以在线性渐变中使用deg 更改颜色方向。

    .half-color {
    /* Create the gradient. */
    background-image: linear-gradient(90deg, rgba(54, 72, 95, 1) 50%, rgba(106, 221, 201, 1) 50%);
    /* Set the background size and repeat properties. */
    width: min-content;
    background-size: 100%;
    background-repeat: repeat;
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
    <h1><span class="half-color">X</span><span class="half-color">Y</span><span class="half-color">Z</span></h1>

    【讨论】：

    • 已有多个答案依赖于背景剪辑和/或线性渐变。
    【解决方案4】：

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

    div {
    position: relative;
    top: 2em;
    height: 2em;
    text-transform: full-width;
}

div:before,
div:after {
    content: attr(data-content);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

div:after {
    color: red;
    /* mask for a single character. By repeating this mask, all the string becomes masked */
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);
    -webkit-mask-repeat: repeat-x;  /* repeat the mask towards the right */
    -webkit-mask-size: 1em;         /* relative width of a single character */ 
    
    /* non-vendor mask settings */
    mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);
    mask-repeat: repeat-x;
    mask-size: 1em;
}


/* demo purposes */
input[name="fontSize"]:first-of-type:checked ~ div {
    font-size: 1em;
}

input[name="fontSize"]:first-of-type + input:checked ~ div {
    font-size: 2em;
}

input[name="fontSize"]:first-of-type + input + input:checked ~ div {
    font-size: 3em;
}
    Font-size:
  <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="A CSS only solution..."></div>
  <div data-content="Try it on Firefox!"></div>

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

    掩码的宽度为mask-size: 1em，以匹配字符串中第一个字符的宽度。 通过使用mask-repeat: repeat-x，将相同的掩码应用于第二个、第三个字符等等。

    我以为使用monospace字体可以解决使用等宽字母的问题，但我错了。 相反，我使用text-transform: full-width 解决了这个问题，不幸的是，我相信只有 Firefox 支持。

    使用相对单位em 允许设计根据font-size 放大/缩小。

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

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

    它的工作原理是为每个字符插入一个子 span。在每个 span 内，从 [0% - 50%] 和 [50% - 100%] 字母的宽度（即 span 元素的宽度）放置一个不重复的 CSS 掩码。

    这样我们就不再有使用等宽字符的限制了。

    const
    dataElement = document.getElementById("data"),
    content = dataElement.textContent,
    zoom = function (fontSize) {
        dataElement.style['font-size'] = fontSize + 'em';           
    };

while (dataElement.firstChild) {
    dataElement.firstChild.remove()
}
for(var i = 0; i < content.length; ++i) {
    const
        spanElem = document.createElement('span'),
        ch = content[i];    
    spanElem.setAttribute('data-ch', ch);
    spanElem.appendChild(document.createTextNode(ch === ' ' ? '\u00A0' : ch));
    data.appendChild(spanElem);
}
    #data {
    position: relative;
    top: 2em;
    height: 2em;
    font-size: 2em;
}

#data span {
    display: inline-block;
    position: relative;
    color: transparent;
}

#data span:before,
#data span:after {
    content: attr(data-ch);
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    color: initial;
}

#data span:after {
    color: red;
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);
    mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);
}
    Font-size:
<input type="range" min=1 max=4 step=0.05 value=2 oninput="zoom(this.value)" onchange="zoom(this.value)">

<div id="data">A Fallback Solution...For all browsers</div>

    【讨论】：

      【解决方案5】：

      这里是画布中的一个丑陋的实现。我尝试了这个解决方案，但结果比我预期的要差，所以还是这样。

      $("div").each(function() {
  var CHARS = $(this).text().split('');
  $(this).html("");
  $.each(CHARS, function(index, char) {
    var canvas = $("<canvas />")
      .css("width", "40px")
      .css("height", "40px")
      .get(0);
    $("div").append(canvas);
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop("0", "blue");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("0.51", "red");
    gradient.addColorStop("1.0", "red");
    ctx.font = '130pt Calibri';
    ctx.fillStyle = gradient;
    ctx.fillText(char, 10, 130);
  });
});
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example Text</div>

      【讨论】：

      • 顺便说一句，您也可以将0.5 用于红色停止。
      【解决方案6】：

      只为载入史册！

      我为自己 5-6 年前的工作提出了一个解决方案，即 Gradext（纯 javascript 和纯 css，无依赖）。

      技术解释是你可以像这样创建一个元素：

      <span>A</span>

      现在，如果您想在文本上制作渐变，您需要创建多个图层，每个图层都有特定的颜色，并且创建的光谱将说明渐变效果。

      例如看看这是&lt;span&gt;里面的单词lorem，它会导致水平渐变效果（check the examples）：

       <span data-i="0" style="color: rgb(153, 51, 34);">L</span>
 <span data-i="1" style="color: rgb(154, 52, 35);">o</span>
 <span data-i="2" style="color: rgb(155, 53, 36);">r</span>
 <span data-i="3" style="color: rgb(156, 55, 38);">e</span>
 <span data-i="4" style="color: rgb(157, 56, 39);">m</span>

      你可以在很长一段时间和很长的段落中继续这种模式。

      但是！

      如果您想在文本上创建垂直渐变效果怎么办？

      还有另一种可能会有所帮助的解决方案。我会详细描述的。

      再次假设我们的第一个&lt;span&gt;。但内容不应该是单独的字母；内容应该是整个文本，现在我们将一次又一次地复制相同的 ‍‍&lt;span&gt;（跨度数将定义渐变的质量，跨度越大，结果越好，但性能不佳）。看看这个：

      <span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

      再次，但是！

      如果您想让这些渐变效果移动并从中创建动画怎么办？

      好吧，还有另一种解决方案。您绝对应该检查animation: true 甚至.hoverable() 方法，这将导致基于光标位置开始渐变！ （听起来很酷 xD）

      这就是我们在文本上创建渐变（线性或径向）的简单方法。如果您喜欢这个想法或想了解更多信息，您应该查看提供的链接。

      也许这不是最佳选择，也许不是执行此操作的最佳性能方式，但它会开辟一些空间来创建令人兴奋和令人愉快的动画，从而激发其他人寻求更好的解决方案。

      它将允许您在文本上使用渐变样式，甚至 IE8 都支持！

      Here you can find a working live demo 原始存储库是 here on GitHub as well, open source 并准备好获取一些更新 (:D)

      这是我第一次（是的，5 年后，你没听错）在 Internet 上的任何地方提及这个存储库，对此我很兴奋！

      [更新 - 2019 年 8 月：] Github 删除了该存储库的 github-pages 演示，因为我来自伊朗！只有源代码可用here tho...

      【讨论】：

        【解决方案7】：

        Now on GitHub as a Plugin!

        随意分叉和改进。

        Demo | Download Zip | Half-Style.com（重定向到 GitHub）

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

        第 1 部分：基本解决方案

        演示： http://jsfiddle.net/arbel/pd9yB/1694/

        这适用于任何动态文本或单个字符，并且都是自动化的。您需要做的就是在目标文本上添加一个类，剩下的就交给我们了。

        此外，为盲人或视障人士的屏幕阅读器保留了原始文本的可访问性。

        单个字符的解释：

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

        对于每个包含字符的 span 元素，您可以创建一个数据属性，例如这里data-content="X"，并在伪元素上使用content: attr(data-content);，因此.halfStyle:before 类将是动态的，您不需要为每个实例硬编码。

        任何文字的解释：

        只需将textToHalfStyle 类添加到包含文本的元素即可。

        // jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
        .halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

        (JSFiddle demo)

        第 2 部分：高级解决方案 - 左右独立部件

        使用此解决方案，您可以单独和独立地设置左右部分的样式。

        一切都一样，只有更高级的 CSS 才能发挥作用。

        jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});
        .halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the right part */
    display: block;
    direction: rtl; /* very important, will make the width to start from right */
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

        (JSFiddle demo)

        第 3 部分：混合搭配和改进

        现在我们知道什么是可能的，让我们创建一些变体。

        -水平半部分

        • 无文字阴影：

        • 每个半部分独立的文本阴影的可能性：

        // jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});
        .halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the top part */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

        (JSFiddle demo)

        -垂直 1/3 零件

        • 无文字阴影：

        • 每个 1/3 部分独立的文本阴影的可能性：

        // jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
        .halfStyle { /* base char and also the right 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the left 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

        (JSFiddle demo)

        -水平 1/3 零件

        • 无文字阴影：

        • 每个 1/3 部分独立的文本阴影的可能性：

        // jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
        .halfStyle { /* base char and also the bottom 1/3 */
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent;
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
  color: #f0f;
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the top 1/3 */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 33.33%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 66.66%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

        (JSFiddle demo)

        -@KevinGranger 改进的HalfStyle

        // jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
        body {
    background-color: black;
}

.textToHalfStyle {
    display: block;
    margin: 200px 0 0 0;
    text-align: center;
}

.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position: relative;
    display: inline-block;
    width: 1;
    font-size: 70px;
    color: black;
    overflow: hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: white;
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

        (JSFiddle demo)

        -@SamTremaine对HalfStyle的PeelingStyle改进 

        // jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
        .halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

        （JSFiddle demo 和samtremaine.co.uk）

        第 4 部分：准备生产

        可以在同一页面上的所需元素上使用自定义的不同 Half-Style 样式集。 您可以定义多个样式集并告诉插件使用哪一个。

        插件在目标.textToHalfStyle 元素上使用数据属性data-halfstyle="[-CustomClassName-]"，并自动进行所有必要的更改。

        因此，只需在包含文本的元素上添加textToHalfStyle 类和数据属性data-halfstyle="[-CustomClassName-]"。该插件将完成剩下的工作。

        此外，CSS 样式集的类定义与上面提到的 [-CustomClassName-] 部分匹配并链接到 .halfStyle，因此我们将拥有 .halfStyle.[-CustomClassName-]

        jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});
        /* start half-style hs-base */

.halfStyle.hs-base {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}

.halfStyle.hs-base:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow: hidden;
    color: #f00; /* for demo purposes */
}

/* end half-style hs-base */


/* start half-style hs-horizontal-third */

.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent;
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

/* end half-style hs-horizontal-third */


/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */

.halfStyle.hs-PeelingStyle {
  position: relative;
  display: inline-block;
  font-size: 68px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  white-space: pre;
  transform: rotate(4deg);
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle.hs-PeelingStyle:before { /* creates the left part */
  display: block;
  z-index: 1;
  position: absolute;
  top: -0.5px;
  left: -3px;
  width: 100%;
  content: attr(data-content);
  overflow: hidden;
  pointer-events: none;
  color: #FFF;
  transform: rotate(-4deg);
  text-shadow: 0px 0px 1px #000;
}

/* end half-style hs-PeelingStyle */


/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/

.textToHalfStyle.hs-KevinGranger {
  display: block;
  margin: 200px 0 0 0;
  text-align: center;
}

.halfStyle.hs-KevinGranger {
  font-family: 'Libre Baskerville', serif;
  position: relative;
  display: inline-block;
  width: 1;
  font-size: 70px;
  color: black;
  overflow: hidden;
  white-space: pre;
  text-shadow: 1px 2px 0 white;
}

.halfStyle.hs-KevinGranger:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  color: white;
}

/* end half-style hs-KevinGranger
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

        (JSFiddle demo)

        【讨论】：

        • 评论不用于扩展讨论；这个对话是moved to chat。
        • 这很酷。值得注意的是，这种技术会破坏自动换行、空白和字符间距 CSS。
        【解决方案8】：




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

        在GitHub 上查看项目 - 查看项目Website。 （这样你就可以看到所有的拆分样式）

        用法

        首先，确保包含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/。

        【讨论】：

        • 到目前为止，您的解决方案对于多个字符来说是最容易实现的，但仍然不是 100%。
        • @MathewMacLean emisfera 必须有答案，对吧？
        • 这有文本换行问题，即使在最新的小提琴中也会出现。当一个字符换行时，它基本上分成了两个。不过，应该是一个微不足道的修复。
        • 不要依赖 jquery-latest.min.js，如果 jQuery 更新并且插件不能与较新的插件一起使用，它会使您的网站在没有警告的情况下崩溃。相反：使用特定版本并在更新时检查兼容性。
        • 您可能想要编辑您的答案以不建议使用 jquery-latest.js。正如@NielsBom 所提到的，过去它可能会在更新时破坏您的网站。自 2014 年 7 月以来，它不会这样做，但那是因为 it is locked at version 1.11.1 并且永远不会再次更新。
        【解决方案9】：

        您可以使用以下代码。在此示例中，我使用了h1 标记并添加了一个属性data-title-text="Display Text"，该属性将在h1 标记文本元素上显示不同颜色的文本，从而产生如下示例所示的半色文本效果

        body {
  text-align: center;
  margin: 0;
}

h1 {
  color: #111;
  font-family: arial;
  position: relative;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
  font-size: 2.5em;
}

h1::after {
  content: attr(data-title-text);
  color: #e5554e;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, 1000px, 30px, 0);
}
        &lt;h1 data-title-text="Display Text"&gt;Display Text&lt;/h1&gt;

        【讨论】：

          【解决方案10】：

          这样的短文本怎么样？

          如果你用循环来做一些事情，它甚至可以处理更长的文本，用 JavaScript 重复字符。反正结果是这样的：

          p.char {
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: red;
}

p.char:before {
  position: absolute;
  content: attr(char);
  width: 50%;
  overflow: hidden;
  color: black;
}
          <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>

          【讨论】：

            【解决方案11】：

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

            var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});
            body{
    background-color: black;
}
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

            【讨论】：

            • 刚玩过@Arbel 解决方案 Arbel 的解决方案有什么不同？很难看出您是否只是复制粘贴了一些代码或对其进行了改进。
            【解决方案12】：

            有限的 CSS 和 jQuery 解决方案

            我不确定这个解决方案有多优雅，但它把所有东西都减少了一半：http://jsfiddle.net/9wxfY/11/

            否则，我已经为您创建了一个很好的解决方案...您需要做的就是为您的 HTML 设置这个：

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

            至于CSS，是非常有限的……你只需要将它应用到:nth-child(even)

            $(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});
            .half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

            【讨论】：

              【解决方案13】：

              另一种纯 CSS 解决方案（如果您不想编写特定于字母的 CSS，则需要数据属性）。这个更全面（测试 IE 9/10，Chrome 最新和 FF 最新）

              span {
  position: relative;
  color: rgba(50,50,200,0.5);
}

span:before {
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);
}
              &lt;span data-char="X"&gt;X&lt;/span&gt;

              【讨论】：

                【解决方案14】：

                我能得到的最接近的：

                $(function(){
  $('span').width($('span').width()/2);
  $('span:nth-child(2)').css('text-indent', -$('span').width());
});
                body{
  font-family: arial;
}
span{
  display: inline-block;
  overflow: hidden;
}
span:nth-child(2){
  color: red;
}
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>X</span><span>X</span>

                演示：http://jsfiddle.net/9wxfY/2/

                这是一个只使用一个跨度的版本：http://jsfiddle.net/9wxfY/4/

                【讨论】：

                • $('span').width() 只返回它找到的第一个跨度的宽度；它必须是你为每一对做的事情。这给了我一个想法......
                • 这与在 jsfiddle.net/9WWsd 上找到的 epascarello 的示例非常相似。正如我告诉他的那样，您的示例是朝着正确方向迈出的一步，但是，在更大范围内使用将是一场噩梦。
                • @MathewMacLean，我没看到。为什么会是噩梦？这个怎么样：jsfiddle.net/9wxfY/4
                • 当你去实现多个字符时会导致问题。
                • @MathewMacLean 这就是美妙的Lettering.JS 的用武之地。
                【解决方案15】：

                这可以通过 CSS :before 选择器和 content property value 来实现。

                .halfed, .halfed1 {
  float: left;
}

.halfed, .halfed1 {
  font-family: arial;
  font-size: 300px;
  font-weight: bolder;
  width: 200px;
  height: 300px;
  position: relative; /* To help hold the content value within */
  overflow: hidden;
  color: #000;
}




.halfed:before, .halfed1:before   {
  width: 50%; /* How much we'd like to show */
  overflow: hidden; /* Hide what goes beyond our dimension */  
  content: 'X'; /* Halfed character */
  height: 100%;
  position: absolute;
  color: #28507D;

}



/* For Horizontal cut off */ 

.halfed1:before   {
  width: 100%;
  height: 55%;
  
}
                <div class="halfed"> X </div>

<div class="halfed1"> X </div>

                >> See on jsFiddle

                【讨论】：

                  【解决方案16】：

                  如果你愿意，你也可以使用 SVG：

                  var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  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" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>

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

                  【讨论】：

                    【解决方案17】：

                    如果你对此感兴趣，那么 Lucas Bebber 的 Glitch 是一个非常相似且超酷的效果：

                    使用简单的 SASS Mixin 创建，例如

                    .example-one {
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}

                    更多详情请访问Chris Coyer's CSS Tricks 和Lucas Bebber's Codepen page

                    【讨论】：

                      【解决方案18】：

                      FWIW，这是我对仅使用 CSS 进行此操作的看法：http://codepen.io/ricardozea/pen/uFbts/

                      几个注意事项：

                      • 我这样做的主要原因是为了测试自己，看看我是否能够在为 OP 提供有意义的答案的同时完成半个角色的造型。

                      • 我知道这不是一个理想的或最具可扩展性的解决方案，这里的人们提出的解决方案对于“现实世界”的场景要好得多。

                      • 我创建的 CSS 代码基于我想到的第一个想法和我自己解决问题的方法。

                      • 我的解决方案仅适用于对称字符，如 X、A、O、M。**它不适用于非对称字符，如 B、C、F、K 或小写字母。

                      • ** 然而，这种方法创建了非常有趣的带有不对称字符的“形状”。尝试将 X 更改为 K 或小写字母，例如 CSS 中的 h 或 p :)

                      HTML

                      <span class="half-letter"></span>

                      SCSS

                      .half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}

                      【讨论】：

                        【解决方案19】：

                        这可能无关紧要，也可能不相关，但前一段时间，我创建了一个 jQuery 函数，它做同样的事情，但水平。

                        我称它为“Stripex”对于'stripe'+'text'，演示：http://cdpn.io/FcIBg

                        我不是说这是任何问题的解决方案，而是我已经尝试过将css应用到半个字符上，但是横向，所以想法是一样的，实现可能很可怕，但它确实有效。

                        啊，最重要的是，我玩得很开心！

                        【讨论】：

                        • @LukyVj 我更新了你的函数，将pointer-events:none 添加到&amp;:nth-child(2) - &amp;:nth-child(5)。这使得文本只能突出显示一次，并且您只能获得一份副本。你可以在这里看到它：codepen.io/anon/pen/upLaj
                        • 请将minimal reproducible example 添加到答案本身，而不是链接到第三方网站。当该链接失效时，答案将失去它所具有的价值。目前这在技术上是“NAA”（不是答案）。
                        【解决方案20】： 
                        .halfStyle {
    position:relative;
    display:inline-block;
    font-size:68px; /* or any font size will work */
    color: rgba(0,0,0,0.8); /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    text-shadow:2px 1px 3px rgba(0,0,0,0.3);
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:-0.5px;
    left:-3px;
    width: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
    transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    text-shadow:0 0 1px black;

}

                        http://experimental.samtremaine.co.uk/half-style/

                        你可以利用这段代码做各种有趣的事情——这只是我的同事和我昨晚想出的一个实现。

                        【讨论】：

                          【解决方案21】：

                          JSFiddle DEMO

                          我们将只使用 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);
}

                          【讨论】：

                            猜你喜欢
                            • 1970-01-01
                            • 2015-12-19
                            • 2020-10-03
                            • 2011-04-09
                            • 2015-05-21
                            • 2018-02-03
                            相关资源
                            最近更新 更多
                            热门标签
                            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode