问题是否可以将CSS应用于角色的一半？

我在找什么：

一种风格的方式半一个角色。（在这种情况下，一半字母是透明的）

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

造型半个字符/字母的方法
使用CSS或JavaScript设置角色的一部分
将CSS应用于角色的50％

以下是我想要获得的一个例子。

是否存在CSS或JavaScript解决方案，或者我将不得不诉诸图像？我宁愿不去图像路线，因为这个文本最终会动态生成。

更新：

因为很多人都问为什么我想要设计一半角色，这就是原因。我的城市最近花了25万美元为自己定义一个新的“品牌”。这个商标是他们想出来的。许多人抱怨简单性和缺乏创造力，并继续这样做。我的目标是想出这个网站作为一个笑话。输入'哈利法克斯'，你会明白我的意思。 :)

1770

2018-05-09 16:16

起源

评论不适用于扩展讨论;这次谈话已经开始了转移到聊天。 - Yvette Colomb♦

答案:

现在在GitHub上作为插件！

enter image description here 随意分叉和改进。

演示 | 下载Zip | Half-Style.com （重定向到GitHub）

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

第1部分：基本解决方案

Half Style on text

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

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

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

单个字符的说明：

纯CSS。您需要做的就是申请 .halfStyle 包含要半个样式的字符的每个元素的类。

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

任何文字的说明：

只需添加 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演示）

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

Half Style on text - advanced - With Text Shadow

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

一切都是一样的，只有更高级的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演示）

第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演示）

- 垂直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演示）

- 水平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演示）

-HalfStyle改进由@KevinGranger

halfStyle - KevinGranger

// 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演示）

-PelelingStyle改进HalfStyle by @SamTremaine

halfStyle - SamTremaine

// 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演示并且 samtremaine.co.uk）

第4部分：准备生产

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

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

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

halfStyle - Multiple on Same Page

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演示）

2650

2018-05-09 16:42

评论不适用于扩展讨论;这次谈话已经开始了转移到聊天。 - Yvette Colomb♦

enter image description here

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

查看项目 GitHub上 - 查看项目网站。（所以你可以看到所有的分割风格）

用法

首先，确保你拥有 jQuery 图书馆包括在内。获取最新jQuery版本的最佳方法是更新头标记：

<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/。

454

2018-05-09 16:32

截至目前，您的解决方案最容易实现多个角色，但仍然不是100％。 - Mathew MacLean

这有文字包装的问题，甚至在最新的小提琴中也会出现。当一个角色包裹时，它基本上分成两个。但应该是一个微不足道的修复。 - BoltClock♦

@MathewMacLean看看这个：链接 :) - Razvan Balosin

不依赖于jquery-latest.min.js，如果更新jQuery并且插件不能与新版本一起使用，它可以使您的网站在没有警告的情况下中断。相反：使用特定版本并在更新时检查兼容性。 - Niels Bom

您可能希望编辑您的答案，不建议使用jquery-latest.js。正如@NielsBom所提到的，过去它可能会在更新时破坏您的网站。自2014年7月以来，它不会这样做，但那是因为它被锁定在版本1.11.1 并且永远不会再次更新。 - Useless Code

编辑（2017年10月）： background-clip 更确切地说 background-image options 现在每个主要浏览器都支持：我可以用吗

是的，你可以只用一个字符，只用CSS。

但是，仅限Webkit（和Chrome）：

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%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>X</h1>

在视觉上，所有使用两个字符的示例（通过JS，CSS伪元素或只是HTML）看起来很好，但请注意，所有这些都会向DOM添加可能导致可访问性的内容 - 以及文本选择/剪切/粘贴问题。

200

2018-05-09 16:42

@MathewMacLean如果只有IE会死并且Firefox开始使用Webkit，我们的工作将会变得如此简单。 :) - DA.

@DA Chrome不再使用webkit了： wired.com/2013/04/blink - Matt Harrison

WebKit有渲染几乎是IE6 / IE7级别奇怪的错误的历史（你甚至可以说Safari和Chrome是现代网络的IE6），并且行为方式偏离了标准，没有特别的原因。自版本9以来，IE已经好多了，所以虽然古代版本应该已经死亡，但我认为没有任何理由对其最新版本感到厌恶。我当然不明白为什么人们支持WebKit / Blink单一文化的想法（这里的评论可能是开玩笑，但我听说过那些认真相信它的人）。 - BoltClock♦

话虽如此， background-clip: text 是非常棒的，他们应该考虑它（或类似的东西 text-decoration-background）对于4级模块。 - BoltClock♦

是的，如果blink / webkit死了，现代IE的+ FF渲染引擎比其他方式幸存下来，我会更高兴。这并不是说Chrome的其余部分并不好看，只是它的渲染几乎是当今最糟糕的渲染。 - Eamon Nerbonne

Example

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

139

2018-05-09 16:33

这很整洁，但唯一的问题是内容将是动态的。 - Mathew MacLean

结果因使用的字体而异。加上计算宽度似乎是一个问题。 - j08691

@MathewMacLean你可以在JS中编写一个简单的循环函数来完成包装。我现在正在将它添加到我的答案中。 - wvandaal

@MathewMacLean来自哪里？ wvandaal是对的，你可以自己包装文本。 - mttdbrd

@MathewMacLean这是一个例子： jsfiddle.net/CL82F/5 - wvandaal

它可能是无关紧要的，也许不是，但不久前，我创建了一个jQuery函数，它可以执行相同的操作，但是是横向的。

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

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

啊，最重要的是，我很开心创造它！

enter image description here

2018-05-13 11:05

@Luky Vj：这个帐户是你的吗？您可能希望将所有帖子合并到一个帐户中，这样您就不会遇到试图修改自己帖子的障碍。 - BoltClock♦

是的，事实上，我首先发布了我的旧第一个帐户..我不得不添加一个图像，我不够流行发布我的图像..但你是对的，我会尽快修复它！ - LukyVj

@LukyVj：您可以按照此处的说明合并您的帐户： stackoverflow.com/help/merging-accounts - BoltClock♦

@LukyVj我通过添加更新了你的功能 pointer-events:none 至 &:nth-child(2) - &:nth-child(5)。这使得文本只能突出显示一次，而您只能得到它的一个副本。你可以在这里看到它： codepen.io/anon/pen/upLaj - Mathew MacLean

这是一个丑陋的画布实现。我尝试了这个解决方案，但结果比我预期的要糟糕，所以无论如何它都在这里。

Canvas example

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div>

$(function(){
    $("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);
        });
    });
});

2018-05-09 19:33

顺便说一句，你可以使用 0.5 对于红色也停止。 - Toothbrush

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

enter image description here

使用简单的SASS Mixin创建

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

2017-10-01 12:39

我最近可以得到：

$(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/

2018-05-09 16:28

$('span').width() 只返回它找到的第一个跨度的宽度;它必须是你为每一对做的事情。这给了我一个想法...... - Pointy

这与在jsfiddle.net/9WWsd上找到的epascarello的例子非常相似。正如我告诉他的那样，你的榜样朝着正确的方向迈出了一步，但是，在更大范围内使用它将是一场噩梦。 - Mathew MacLean

@MathewMacLean，我没有看到。为什么这会是一场噩梦？这个怎么样： jsfiddle.net/9wxfY/4 - Prisoner

当你去实现多个角色时会导致问题。 - Mathew MacLean

@MathewMacLean那是神话般的地方 Lettering.JS 进来。 - Pointy

Enter image description here

我刚刚玩@ 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>

2018-05-12 20:32

刚玩@Arbel解决方案与Arbel的解决方案有何不同？很难看出你是只复制粘贴了一些代码还是改进了它。 - A.L

另一个仅限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);
}

<span data-char="X">X</span>

2018-05-12 18:44

问题 是否可以将CSS应用于角色的一半？

答案:

现在在GitHub上作为插件！

演示 | 下载Zip | Half-Style.com （重定向到GitHub）

第1部分：基本解决方案

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

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

- 水平半部件

没有文字阴影：

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

- 垂直1/3零件

没有文字阴影：

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

- 水平1/3零件

没有文字阴影：

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

-HalfStyle改进由@KevinGranger

-PelelingStyle改进HalfStyle by @SamTremaine

第4部分：准备生产

查看项目 GitHub上 - 查看项目 网站。 （所以你可以看到所有的分割风格）

用法

标记

定制

JSFiddle DEMO

热门问题

问题是否可以将CSS应用于角色的一半？

查看项目 GitHub上 - 查看项目网站。（所以你可以看到所有的分割风格）