通过HTML和CSS设置文字方向

HTML文本中默认的文本方向是left to right。但对于古汉语或者阿拉伯语等语言，文本方向则是right to left。如何实现呢？

1. HTML方式：<bdo dir="rtl"></bdo> 点击进入官方网页

HTML代码如下：

<bdo dir="ltr">a bc de.</bdo>
<bdo dir="rtl">A BC DE%</bdo>

显示效果如下：

a bc de.
%ED CB A

可见：通过HTML中的bdo标签改变文字方向，是依照从右向左的顺序依次输出bdo标签中的每个字符。但输出的内容还是从屏幕的左侧依次向右输出。不要与text-align:right和float:right搞混。

2. CSS方式：{direction:rtl;}

HTML和CSS如下：

<p style="direction: rtl;">It's a beautiful world, isn't it? I think it is.?!@#$%[]{}</p>
<p>It's a beautiful world, isn't it? I think it is.?!@#$%[]{}</p>
<p style="direction: rtl;">It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!</p>
<p>It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!</p>

显示效果如下：

                                            {}[]%$#@!?.It's a beautiful world, isn't it? I think it isIt's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!!It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abcIt's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!

可见：格式上，使用了direction的文本呈现右对齐；内容上，可以将这段内容中中最后一个非符号字符(含)之前看成是文本部分，最后的符号看成是符号部分，每个符号都是一个独立的部分。（如果一个符号前后都有文本字符，那这么符号将被认为是文本部分。）然后在页面上从右向左倒序输出以上的所有部分，即，首先输出完整的文本部分，然后再倒序一次输出所有符号部分。

3. CSS方式：{direction:rtl; unicode-bidi: bidi-override;}

HTML和CSS如下：（对2中的源码进行修改，在style部分添加unicode-bidi: bidi-override;部分）

<p style="direction: rtl; unicode-bidi: bidi-override;">It's a beautiful world, isn't it? I think it is.?!@#$%[]{}</p>

显示效果如下：

                                                {}[]%$#@!?.si ti kniht I ?ti t'nsi ,dlrow lufituaeb a s'tI

可见：每一个字符都是一个独立的个体，页面将从右向左依次倒叙输出所有字符。

总结见下表：

(纯从文字技巧层面来看，1和3的实现比较彻底，但从语义来看，可能2有实际的应用意义，并不确定，有待以后探究！)

对设置文字方向的几种方式的比较

方式格式文本 1 左对齐完全倒叙 2 右对齐部分倒叙 3 右对齐完全倒叙

这篇文章解释得更详细：我的小树林

通过HTML和CSS设置文字方向相关推荐

CSS设置文字的划线
CSS设置文字的划线文字加上下划线.顶划线和删除线,在文档中是经常使用的. CSS中通过设置文字的text-decoration属性,来实现这些特殊的效果. <span style=" ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
如何让竖行文本框从下往上_如何在Office文档中插入(使用)横排、竖排文本框并设置文字方向...
①:为什么要使用文本框? 文本框相当于一个容器,里面可以容纳文字对象!放置于文本框的文字对象,基于文本框,可形成一个统一的整体: ②:使用文本框有什么好处? 作为一个容器,文本框就像图片对象一样,周边 ...
CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行,多余显示省略号 .view-text{/**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/di ...
如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
css设置文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代仅仅是用来提示自己,不要忘记的让文字只显示一行,超出显示省略号 overflow: hidden ...
CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...
css 设置文字隐藏
css 设置文字隐藏设置display: none:但是这个设置后,后面的字体将会向前移动:就是隐藏之后不占位置: 设置opacity: 0 :会被子元素继承,但是不能设置子元素opacity:0来 ...
php 自定义行间距,CSS设置文字行间距的方法介绍（代码示例）
本篇文章的内容是关于CSS设置文字行间距的方法介绍,内容很详细,有需要的朋友可以参考一下. 对于行间距的设置肯定是需要行高属性line-height来设置间距.(相关推荐:CSS学习手册) 指定绝对值 ...

通过HTML和CSS设置文字方向

通过HTML和CSS设置文字方向相关推荐

最新文章

热门文章