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

三杯过后尽开颜

参数通过 assignment 传输。这背后的原因是双重的:
[ol]传入参数实际上是一个对象引用（但是引用是按值传递的）
$ T2 Q& ^  }/ V有些数据类型是可变的，但有些不是[/ol]所以：
假如你要一个可变对象传递给一种方法，可以引用同一对象，可以随意改变，但如果重新绑定引用，外部作用域将一无所知，完成后，外部引用仍将指向原始对象。
如果将不可变对象传递给方法，仍然不能重新绑定外部引用，甚至不能改变对象。让我们举一些例子，以便更清楚。
: \* P& |$ h& I3 XList - 可变类型让我们尝试修改传递给方法的列表：
: U5 A, }0 k; u# ~

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)
1 @- ^6 W* K5 }; d- [4 S

输出：

before,outer_list = ['one','two','three']got ['one','two','three']changed to ['one','two','three','four']after,outer_list = ['one','two','three','four']

因为引入的参数是引用 outer_list，我们可以使用 而不是它的副本mutating list 改变方法，并在外部范围内反映改变。
3 u9 q. f! `! ?& b& o& @现在让我们看看当我们试图将其更改为参数引用时会发生什么：
8 [) \  j1 |7 U8 [1 b

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']
6 ^' A7 r4 I) w# M2 @: i  T

由于the_list参数是按值传递的，所以分配新列表对方法外的代码没有影响。the_list是outer_list我们引用的副本the_list指向新列表，但不能更改outer_list指向位置。
# B* P% J% w0 [( q7 @  R  g5 ~String - 不可变类型它是不可改变的，所以我们不能改变字符串的内容
* W/ S7 R8 I" U. v4 X) p) I- G现在，让我们试着改变参考

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)
/ z% _+ j, Q! C  m  `

输出：
) w$ t" {5 U2 C* b; i- 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

同样，由于the_string参数是按值传递的，因此分配新字符串对方法外部代码没有影响。the_string是引用副本，outer_string我们the_string指向新字符串，但不能更改outer_string指向位置。
/ Z5 i! \  j, Z1 l3 G6 A我希望这能澄清一点。
* I% h$ v7 p/ S编辑：有人指出没有回答@David 最初提出的问题，“我可以做些什么来通过实际引用传递变量吗？”。让我们继续努力。
( h; F: q; n" O如何解决这个问题？正如@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)
, }/ u9 G3 X$ F# Q

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

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])
4 l# g" r4 V/ |0 t: D4 N

虽然看上去有点麻烦。
- }( L1 a# W- i2 {# b* f" a& i                                                               
" p. l( y, f. l7 R/ O! t- y    解决方案:                                                               
                                                                单个字符的纯 CSS
9 j% a1 ~' y+ [/ r/ m% FJavaScript 自动化跨文本或多个字符
$ {( l5 Z9 u8 _6 B8 x" b屏幕阅读器为盲人或视障者保留文本可访问性1 部分:基本解决方案

演示：http:    //jsfiddle.net/arbel/pd9yB/1694/
这适用于任何动态文本或单个字符，都是自动化的。你需要做的是在目标文本中添加一个类别，剩下的给我们。
. o8 l* N2 h1 E- s此外，原始文本的可访问性视障人士保留了原始文本的可访问性。
: a# C* d, y1 P0 q5 ^6 F解释单个字符：
6 g2 f! a5 ]2 I7 f. Y, `' F. V纯 CSS。你需要做的就是将军.halfStyleclass 用于每个元素，包含你想要的半样式字符。
每个 包含字符的 span 元素，您可以创建数据属性，如 here data-content="X"，并用于伪元素content: attr(data-content);，因此.halfStyle:before这类将是动态的，您不需要为每个例子编码它。
解释任何文本：
  ^7 B1 F. s" o) r& d( T$ v5 f只需将textToHalfStyle将包含文本的元素添加到类中。

• // 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:
  / ^, k0 N5 a& e. E2 x/ [( }9 \
• XYZAAutomated:Half-style,please.
  

（JSFiddle 演示）
- k  f* H6 B; _/ c: \* l2 部分:高级解决方案 - 独立的左右部件

+ a  O& Z) D0 e- Q) w*使用此解决方案，您可以独立设置左右部件的样式*。
一切都一样，只有更高级的 CSS 才能发挥作用。
（JSFiddle 演示）
# d) o( g$ y6 a1 {7 a: s- {第 3 部分:混合搭配和改进现在我们知道什么是可能的，让我们创造一些变化。
; r: }1 O, s1 {-水平半部分没有文字阴影：

独立文本阴影的可能性是：
6 `/ J* k- B8 z" E# X
Show code snippet
* y/ }# g' i3 `* J, s: ?8 H# R（JSFiddle 演示）
1 y1 s4 Q. j) m, _-垂直 1/3 零件没有文字阴影：

% f5 Z$ Q9 k* }' R' T独立文本阴影的可能性为每个 1/3 :

-1/3 零件没有文字阴影：
/ G) c: y$ Y- ?  ~1 @4 w% T
1 d& @/ }$ \8 P1 `独立文本阴影的可能性为每个 1/3 :
2 ^2 j1 y3 ]' z8 w5 P
, |" d9 w8 J# n  P; y-HalfStyle改进@KevinGranger
4 f0 n1 P. a3 l; X, c1 D2 x# |
5 T5 ^" M& U& W8 F' f-@SamTremaine 对 HalfStyle 的 PeelingStyle改进

; f. s0 l5 B* c2 u5 z2 eShow code snippet
: S. g3 r' v& v; Q. O3 o6 r（JSFiddle 演示和samtremaine.co.uk上）
5 T. E# V9 Q; N第 4 部分：准备生产定制的不同 可以用于同一页面所需的元素Half-Style 风格集。您可以定义多个样式集，并告诉插件使用哪一个。
9 h$ r4 _" N' Z该插件data-halfstyle="[-CustomClassName-]"在目标.textToHalfStyle使用数据属性并自动更改所有必要的元素。
7 A, E$ t1 H2 e5 E9 _因此，只需添加文本元素textToHalfStyleclass 和 data 属性data-halfstyle="[-CustomClassName-]"。剩下的工作将由插件完成。
6 D( @8 K  A& H# V1 T( G: e( z# a
此外，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.
  ; E. u- P5 n8 B$ P. x% F2 t' J# X) J

               
0 j3 O4 W$ g* D9 q& Pplease.
    Half-style,please.
# |# K% p" ~- e2 s6 P# G    Half-style,please.
: v0 G- E% I1 T2 G    Half-style,