SO热门问答：可以为半个字符应用CSS样式吗？

445 查看

Mathew MacLean 提问

我正在寻找:

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

我目前已经搜索并尝试的（不走运）：

渲染一半字符/字母的方法
用CSS或JavaScript渲染字符的一部分
对一个字符的50%应用CSS

以下是我尝试实现的一个例子：

这个是否有一个CSS或者JavaScript的解决方法存在，还是我必须采用图片的方法？我不愿意采用图片的方法，因为文本将最终是动态生成的。

来自 Arbel 的最佳回答：（1280+ 赞）

已做成一个插件，放 Github 上了！

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

单个字符的纯css
JavaScript用来自动覆盖文本或多字符
保护文本的可读性，盲人或视障人士使用的屏幕阅读器可识别

第一部分: 基本解决方案

演示: http://jsfiddle.net/pd9yB/817/

这种方法用于任何动态文本或单个字符，并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class，剩下的就解决了。

同时，保留了原文的可访问性，可以被盲人或视障人士使用的屏幕阅读器识别。

单个字符的实现：

纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。

对于每个包含字符的span元素，你可以添加一个data属性，比如data-content=”X”，并且在伪元素上使用content:attr(data-content)；这样，.halfStyle:before class将会是动态的，你不需要为每个实例进行硬编码

任意文本的实现：

只需添加textToHalfStyle class到包含文本的元素上。

CSS:

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

}

HTML

Single Characters:

X

Y

Z

A

<hr/>

Automated:

Half-style, please.

它会自动生效，只要添加 textToHalfStyle class到包含文本的元素上。

jQuery 自动模式:

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('' + text + '');

// 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 += '' + chars[i] + '';

}

// Write to DOM only once

$el.append(output);

});

演示: http://jsfiddle.net/pd9yB/819/

第二部分：先进的解决方案-独立的左边和右边

使用这种方法你可以分别单独的渲染左边和右边部分。

一切都是相同的，只是更高级的CSS在发挥作用。

演示: dle.net/pd9yB/819/">http://jsfiddle.net/pd9yB/819/

第二部分：先进的解决方案-独立的左边和右边

使用这种方法你可以分别单独的渲染左边和右边部分。

一切都是相同的，只是更高级的CSS在发挥作用。

演示: Ǎ方法为半个字符应用样式（在这种情况下，一半的字母是透明的）。

我目前已经搜索并尝试的（不走运）：

渲染一半字符/字母的方法
用CSS或JavaScript渲染字符的一部分
对一个字符的50%应用CSS

以下是我尝试实现的一个例子：

这个是否有一个CSS或者JavaScript的解决方法存在，还是我必须采用图片的方法？我不愿意采用图片的方法，因为文本将最终是动态生成的。

来自 Arbel 的最佳回答：（1280+ 赞）

已做成一个插件，放 Github 上了！

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

单个字符的纯css
JavaScript用来自动覆盖文本或多字符
保护文本的可读性，盲人或视障人士使用的屏幕阅读器可识别

第一部分: 基本解决方案

演示: http://jsfiddle.net/pd9yB/817/

这种方法用于任何动态文本或单个字符，并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class，剩下的就解决了。

同时，保留了原文的可访问性，可以被盲人或视障人士使用的屏幕阅读器识别。

单个字符的实现：

纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。

任意文本的实现：

只需添加textToHalfStyle class到包含文本的元素上。

CSS:

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

}

HTML

Single Characters:

X

Y

Z

A

<hr/>

Automated:

Half-style, please.

它会自动生效，只要添加 textToHalfStyle class到包含文本的元素上。

jQuery 自动模式:

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('' + text + '');

// 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 += '' + chars[i] + '';

}

// Write to DOM only once

$el.append(output