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

三杯过后尽开颜

参数通过 assignment 传输。这背后的原因是双重的:
[ol]传入参数实际上是一个对象引用（但是引用是按值传递的）
/ N5 m! l$ D9 m. D* }. f5 @0 c% H有些数据类型是可变的，但有些不是[/ol]所以：
9 L) k/ _4 M4 w假如你要一个可变对象传递给一种方法，可以引用同一对象，可以随意改变，但如果重新绑定引用，外部作用域将一无所知，完成后，外部引用仍将指向原始对象。
/ Y% f* y" _0 L如果将不可变对象传递给方法，仍然不能重新绑定外部引用，甚至不能改变对象。让我们举一些例子，以便更清楚。
List - 可变类型让我们尝试修改传递给方法的列表：
; D" o' O- \; p9 p; @

def try_to_change_list_contents(the_list):    print('got',the_list)    the_list.append('four    print('changed to',the_list)outer_list = ['one','two','three']print('before,outer_list =',outer_list)try_to_change_list_contents(outer_list)print('after,outer_list =',outer_list)
5 V6 Z+ A& ]7 ?, L2 G: S8 d" n7 e: F

输出：
: v% p1 o  L! a6 ?1 B6 s% ~

before,outer_list = ['one','two','three']got ['one','two','three']changed to ['one','two','three','four']after,outer_list = ['one','two','three','four']
% A2 h" ]1 u0 \6 [  ?( h

因为引入的参数是引用 outer_list，我们可以使用 而不是它的副本mutating list 改变方法，并在外部范围内反映改变。
% T/ E" b3 x/ C' a* a5 A4 G) J现在让我们看看当我们试图将其更改为参数引用时会发生什么：

def try_to_change_list_reference(the_list):    print('got',the_list)    the_list = ['and','we','can','not','lie    print('set to',the_list)outer_list = ['we','like','proper','English']print('before,outer_list =',outer_list)try_to_change_list_reference(outer_list)print('after,outer_list =',outer_list)

输出：

before,outer_list = ['we','like','proper','English']got ['we','like','proper','English']set to ['and','we','can','not','lie']after,outer_list = ['we','like','proper','English']
, E+ o( p! V3 G

由于the_list参数是按值传递的，所以分配新列表对方法外的代码没有影响。the_list是outer_list我们引用的副本the_list指向新列表，但不能更改outer_list指向位置。
/ r; }9 b+ K6 CString - 不可变类型它是不可改变的，所以我们不能改变字符串的内容
现在，让我们试着改变参考
' R' u  u# ?8 H+ B* R. ^

def try_to_change_string_reference(the_string):    print('got',the_string)    the_string = 'In a kingdom by the sea'    print('set to',the_string)outer_string = 'It was many and many a year ago'print('before,outer_string =',outer_string)try_to_change_string_reference(outer_string)print('after,outer_string =',outer_string)
0 Y2 g. d# J# o2 I4 l

输出：

before,outer_string = It was many and many a year agogot It was many and many a year agoset to In a kingdom by the seaafter,outer_string = It was many and many a year ago
8 S: ]: R4 `! W; ]4 s/ m

同样，由于the_string参数是按值传递的，因此分配新字符串对方法外部代码没有影响。the_string是引用副本，outer_string我们the_string指向新字符串，但不能更改outer_string指向位置。
我希望这能澄清一点。
2 h( o7 o* G5 m, w% a+ b; a. n编辑：有人指出没有回答@David 最初提出的问题，“我可以做些什么来通过实际引用传递变量吗？”。让我们继续努力。
如何解决这个问题？正如@Andrea 的答案显示，您可以返回新值。这不会改变传递事物的方式，但它可以让你得到你想要的信息：

def return_a_whole_new_string(the_string):    new_string = something_to_do_with_the_old_string(the_string)    return new_string# then you could call it likemy_string = return_a_whole_new_string(my_string)
) T! u7 v" p, s6 J/ v1 W' q3 V% V

如果您真的想避免使用返回值，您可以创建一个类来保存您的值并将其传输给函数或使用现有类，如列表：
& l5 G3 V' @8 h6 X

def use_a_wrapper_to_simulate_pass_by_reference(stuff_to_change):    new_string = something_to_do_with_the_old_string(stuff_to_change[0])    stuff_to_change[0] = new_string# then you could call it likewrapper = [my_string]use_a_wrapper_to_simulate_pass_by_reference(wrapper)do_something_with(wrapper[0])
# S% ~  u' E  z4 @6 Z9 L) ~- R

虽然看上去有点麻烦。
                                                               
    解决方案:                                                               
                                                                单个字符的纯 CSS
6 T% }6 W  q2 @% n1 x0 b" nJavaScript 自动化跨文本或多个字符
屏幕阅读器为盲人或视障者保留文本可访问性1 部分:基本解决方案
, F: F% C/ Z: o: t7 Y) l' ^
# u4 a4 U/ F" X5 A2 C演示：http:    //jsfiddle.net/arbel/pd9yB/1694/
这适用于任何动态文本或单个字符，都是自动化的。你需要做的是在目标文本中添加一个类别，剩下的给我们。
此外，原始文本的可访问性视障人士保留了原始文本的可访问性。
2 ]7 {! C8 }5 h2 X解释单个字符：
纯 CSS。你需要做的就是将军.halfStyleclass 用于每个元素，包含你想要的半样式字符。
$ |) y5 k( Q& a2 @1 L+ Q2 l4 R每个 包含字符的 span 元素，您可以创建数据属性，如 here data-content="X"，并用于伪元素content: attr(data-content);，因此.halfStyle:before这类将是动态的，您不需要为每个例子编码它。
% `, I; R6 @" I& G解释任何文本：
只需将textToHalfStyle将包含文本的元素添加到类中。

% X- A) y; U- H, P! J. @1 v
• // jQuery for automated modejQuery(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   '';    }    // 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;}Single Characters:
  
• XYZAAutomated:Half-style,please.
  ) j4 J; `! L# u7 `- W

（JSFiddle 演示）
, k2 F) _/ W! M" f; ?& C1 v! u2 部分:高级解决方案 - 独立的左右部件
3 a# j; j5 w* J4 ]8 Q
9 `( e7 l& s0 z" ^' F  x5 j9 g  t*使用此解决方案，您可以独立设置左右部件的样式*。
一切都一样，只有更高级的 CSS 才能发挥作用。
（JSFiddle 演示）
$ x7 G9 W/ X6 x4 G  \第 3 部分:混合搭配和改进现在我们知道什么是可能的，让我们创造一些变化。
-水平半部分没有文字阴影：
2 u, `9 [* ?3 g( F3 L6 c
' v6 _& \) l$ U* w6 N, S独立文本阴影的可能性是：

4 v$ Q9 J, N) P1 l! nShow code snippet
（JSFiddle 演示）
0 t* Q% G( Z1 D, D! z# j-垂直 1/3 零件没有文字阴影：

独立文本阴影的可能性为每个 1/3 :

8 @4 ~. y) \. S+ g1 ]1 _-1/3 零件没有文字阴影：
4 W* X  a- H: s: k# A! g
独立文本阴影的可能性为每个 1/3 :
& ]) z0 A3 ^2 P/ k) N
! }" S5 ]( A! @-HalfStyle改进@KevinGranger

-@SamTremaine 对 HalfStyle 的 PeelingStyle改进

; g. b/ `3 w) B0 bShow code snippet
（JSFiddle 演示和samtremaine.co.uk上）
+ `  Y$ c/ n8 Y$ f: W1 p第 4 部分：准备生产定制的不同 可以用于同一页面所需的元素Half-Style 风格集。您可以定义多个样式集，并告诉插件使用哪一个。
该插件data-halfstyle="[-CustomClassName-]"在目标.textToHalfStyle使用数据属性并自动更改所有必要的元素。
6 n' M$ x' f2 J9 `) f" C因此，只需添加文本元素textToHalfStyleclass 和 data 属性data-halfstyle="[-CustomClassName-]"。剩下的工作将由插件完成。
5 i+ N6 F5 H3 {! X$ Y' q2 g2 A, B
: M& z' d8 d: W此外，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(''   halfstyle_text   ')；          Reset output for appending        halfstyle_output = Iterate over all chars in the text        for (halfstyle_i = 0; halfstyle_i '   halfstyle_chars[halfstyle_i]   '       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 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    Half-style,please.
  , ?: b0 E7 ^- Y2 O

               
please.
    Half-style,please.
    Half-style,please.
0 B! c) _# p+ I' ~$ z0 s    Half-style,