CSS3中的注音对齐属性ruby-align用法指南

来源：爱站网时间：2021-08-21编辑：网友分享

爱站技术小编应朋友的要求，特此出了一篇介绍CSS3中的注音对齐属性ruby-align的文章，这篇文章主要介绍了CSS3中的注音对齐属性ruby-align用法指南,ruby-align支持多种语言注音的上下对齐,包括日语中的汉字和平假名的注音形式对齐,需要的朋友可以参考下

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

è¯æ³•ï¼š
Â
ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge
Â
å‚æ•°ï¼š
Â
auto : ã€€ç”±æµè§ˆå™¨ç¡®å®šå¯¹é½æ–¹å¼ã€‚å¯¹äºŽideographicï¼ˆä¸œäºšæ–‡æœ¬ï¼‰ä»¥distribute-spaceå€¼å¯¹é½ã€‚å¯¹äºŽLatinæ–‡æœ¬ä»¥centerå€¼å¯¹é½
left : ã€€æ ¹æ®åŸºæœ¬å®½åº¦å·¦å¯¹é½
center : ã€€æ ¹æ®åŸºæœ¬å®½åº¦å±…ä¸å¯¹é½ã€‚å¦‚æžœåŸºæœ¬å®½åº¦å°äºŽrubyæ–‡æœ¬çš„å®½åº¦ï¼Œé‚£ä¹ˆåœ¨rubyæ–‡æœ¬çš„å®½åº¦ä¸å±…ä¸åŸºæœ¬å®½åº¦
right : ã€€æ ¹æ®åŸºæœ¬å®½åº¦å³å¯¹é½
distribute-letter : ã€€å¦‚æžœrubyæ–‡æœ¬çš„å®½åº¦å°äºŽåŸºæœ¬å®½åº¦ï¼Œåˆ™rubyæ–‡æœ¬åœ¨åŸºæœ¬å®½åº¦ä¸å‡åŒ€åˆ†å¸ƒã€‚å¦‚æžœrubyæ–‡æœ¬çš„å®½åº¦å¤§äºŽæˆ–ç‰äºŽåŸºæœ¬å®½åº¦ï¼Œå±…ä¸å¯¹é½
distribute-space : ã€€å¦‚æžœrubyæ–‡æœ¬çš„å®½åº¦å°äºŽåŸºæœ¬å®½åº¦ï¼Œåˆ™rubyæ–‡æœ¬åœ¨åŸºæœ¬å®½åº¦ä¸å‡åŒ€åˆ†å¸ƒã€‚åœ¨rubyæ–‡æœ¬ä¸ï¼Œåœ¨ç¬¬ä¸€ä¸ªå—ç¬¦çš„å‰é¢åŽæœ€åŽå—ç¬¦çš„åŽé¢æœ‰åŠä¸ªå—è·çš„ç©ºç™½åŒºåŸŸã€‚å¦‚æžœrubyæ–‡æœ¬çš„å®½åº¦å¤§äºŽæˆ–ç‰äºŽåŸºæœ¬å®½åº¦ï¼Œå±…ä¸å¯¹é½
line-edge : ã€€å¦‚æžœrubyæ–‡æœ¬ä¸ç›¸é‚»è¡Œè¾¹ç¼˜ï¼Œåˆ™å…¶è¢«å±…ä¸ã€‚å¦åˆ™rubyæ–‡æœ¬è¡Œåœ¨åŸºæœ¬æ–‡æœ¬è¾¹çš„ä¸Šæ–¹

å®žä¾‹ä»£ç ï¼š

CSS Codeå¤åˆ¶å†…å®¹åˆ°å‰ªè´´æ¿

"-//W3C//DTDÂ XHTMLÂ 1.0Â Transitional//EN"Â "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Â Â
"http://www.w3.org/1999/xhtml"> Â Â Â xmlns=
Â
"Content-Type"Â content="text/html;Â charset=utf-8"Â /> Â Â
Â Â
ruby.sample1Â {ruby-align:auto;} Â Â
ruby.sample2Â {ruby-align:start;} Â Â
ruby.sample3Â {ruby-align:left;} Â Â
ruby.sample4Â {ruby-align:center;} Â Â
ruby.sample5Â {ruby-align:end;} Â Â
ruby.sample6Â {ruby-align:rightright;} Â Â
ruby.sample7Â {ruby-align:distribute-letter;} Â Â
ruby.sample8Â {ruby-align:distribute-space;} Â Â
ruby.sample9Â {ruby-align:line-edge;} Â Â
rubyÂ {background-color:pink;} Â Â
rtÂ {background-color:yellow;}Â Â Â
Â Â
Â Â Â
Â Â
Â Â Â
Â
"sample1">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:auto;ï¼‰Â class=Â class=Â class=
Â Â
"sample2">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:start;ï¼‰Â class=Â class=Â class=
Â Â
"sample3">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:left;ï¼‰Â class=Â class=Â class=
Â Â
"sample4">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:center;ï¼‰Â class=Â class=Â class=
Â Â
"sample5">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:end;ï¼‰Â class=Â class=Â class=
Â Â
"sample6">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:rightright;ï¼‰Â class=Â class=Â class=
Â Â
"sample7">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:distribute-letter;ï¼‰Â class=Â class=Â class=
Â Â
"sample8">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:distribute-space;ï¼‰Â class=Â class=Â class=
Â Â
"sample9">ä¸å›½ã¡ã‚…ã†ã”ã"sample1">æ—¥æœ¬japanÃ—"sample1">Englandè‹±æ ¼å…°ï¼ˆruby-align:line-edge;ï¼‰Â class=Â class=Â class=
Â Â
Â Â
Â Â

Â Â

å®žä¾‹å›¾
201671114054860.png (444Ã—442)

ä»¥ä¸Šå†…å®¹å°±æ˜¯çˆ±ç«™æŠ€æœ¯é¢‘é“å°ç¼–ä¸ºå¤§å®¶åˆ†äº«çš„CSS3ä¸çš„æ³¨éŸ³å¯¹é½å±žæ€§ruby-alignç”¨æ³•æŒ‡å—ï¼Œçœ‹å®Œä»¥ä¸Šåˆ†äº«ä¹‹åŽï¼Œå¤§å®¶åº”è¯¥è¯¦ç»†äº†è§£äº†ç”¨æ³•æŒ‡å—å§ã€‚

CSS3中的注音对齐属性ruby-align用法指南

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载