css中的文字竖排和间距控制

时间:2021-03-06 23:50:37
css中的文字竖排和间距控制
文字的竖排和间距控制
竖排
代码: <DIV style="WRITING-MODE:tb-rl;TEXT-ALIGN:left"><p>文字</p></div>


解释:writing-mode:文字的写入模式
            tb-rl:从上到下,从右到左;依此类推你也可以让文字从上到下再从左到右排列,键入tb-lr就行了
            text-align是文本对齐,左对齐、右对齐还是居中,这个在文本编辑页面上就可以选择的。
示范:
天净沙·秋思
元·马致远
枯藤老树昏鸦
小桥流水人家
古道西风瘦马
夕阳西下
断肠人在天涯
这样排版出来的文字方向有些问题,在loadmemory那里找到了解决办法,具体如下:
返回日志编辑页面,点击上方编辑功能按钮中“字型”下拉菜单,如果此时你不想更改日志文字的字体,则在字型选单中选取第一项,即“Arial”,然后预览日志,你会发现日志版面已经是真正的竖排版了。如果你对现有中文字体不满意,你可以点击下拉菜单中的“其它字体”,然后输入相应的TrueType 中文字体,如simsun(宋体),simhei(黑体),mingliu(柳体)等,注意,如果浏览者的操作系统中没有安装相应的字体,则无法看到你所编辑的相应字体效果。


示范:
天净沙·秋思
元·马致远
枯藤老树昏鸦
小桥流水人家
古道西风瘦马
夕阳西下
断肠人在天涯


你也可以调整文字的间距来获得更好的视觉效果
代码: <div style="letter-spacing:0.3em;line-height:13pt"><p>文字</p></div>


解释: letter-spacing:控制字母间的间距,对中文而言就是字与字之间的间距
             letter-spacing替换为word-spacing:实现英文的词与词之间的间距的控制
             line-height是:控制行间距,无论英文还是中文都是一样的

            实际应用中,请反复调整上面的数值以达到最佳效果。