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

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是：控制行间距，无论英文还是中文都是一样的

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

css中的文字竖排和间距控制相关推荐

php如何让文字竖排显示文字,CSS如何实现文字竖排效果
CSS如何实现文字竖排效果: 文字竖排虽然不常用,但是并不是没有这方面的需求,但是现有的CSS属性支持度都不高或者兼容性不好,确实没有找到合适的方法来实现此效果,下面就分享一个用javascript实 ...
[tips]css中实现文字色彩渐变
css中实现文字色彩渐变 tailwind写法: 必要的只有text-transparent bg-clip-text 对应color: transparent background-clip:tex ...
html中文案竖排怎么写,做了这个活动，感觉自己成了垂直排版css大师（文字竖排）...
前段时间协助完成作家的盘点活动,设计大大给的视觉稿如下图.最初拿到稿子时,以为是一个简单的常规活动,实际在完成这个活动的过程中有一点点小波折,自己也在这个过程中学习到了关于垂直排版的知识点,下面来跟大 ...
行内元素中去掉文字的上下间距，使得文字所在元素的高度同字体高度一致的方法...
之前在p这类块元素中的文字,给line-hight=1;就可以去掉文字自带的上下间距, 像这样: 最近突然发现这个方法在行内块和块元素上好使,可当用在span或者a这类内联元素上都不好使,除了转为块元 ...
CSS中的文字对齐问题
要了解css中文字的对齐问题,首先要了解文字在浏览器中的基线baseline,基线在浏览器的位置如图所示: 由于基线的存在,当图片和文字在一行中显示时,底部将无法对齐. 我们可以看到这张图片的底部出现 ...
CSS中解决文字高度上下存在留白的问题
1. 问题我们使用CSS为字体设置:font-size 后,发现高度会比正常UI设计的要高一些,字体的上下存在一部分留白区域占位置. 如图所示: .test{font-size: 24px; } 2 ...
CSS背景、文字、字符间距
背景: background-repeat: 值描述 repeat 默认.背景图像将在垂直方向和水平方向重复. repeat-x 背景图像将在水平方向重复. repeat-y 背景图像将在垂直方向重 ...
CSS中实现文字两端对齐的方法，登陆注册界面经常用到
在写登陆或注册界面时,经常会遇到文字两端对齐(word中有类似对齐方式)的问题,如下图: 用户名和密码并没有两端对齐,那么该怎样处理其实只需要两行CSS代码就可以解决: 关键两行是:text-ali ...
css中设置文字环绕图片,css 设置文字环绕图片
要达到的效果是可以环绕图片最近做的一个项目,有一个具体的要求,是要完成文字对图片的环绕效果,其实不是很难:来做一份随笔,记录一下该做法,大家有什么好的实现方式,也可以互相探讨一下. 这是我自己写的一 ...

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

css中的文字竖排和间距控制相关推荐

最新文章

热门文章