html5css字竖着显示,css如何设置竖排文字？

有时候网页中的文字因为特别要求不能横向显示，这时候所需要的就是让文字来竖排显示，那么，网页中如何让文字竖排显示呢？接下来本篇文章将介绍css实现文字竖排显示的方法，希望对大家有所帮助。

方法一：使用writing-mode属性

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法：writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl

参数：vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left

vertical-lr：垂直方向内内容从上到下，水平方向从左到右

lr-tb：从左向右，从上往下；

tb-rl：从上往下，从右向左。

示例：

test

.one {

margin: 0 auto;

height: 140px;

writing-mode: vertical-lr;/*从左向右从右向左是 writing-mode: vertical-rl;*/

writing-mode: tb-lr;/*IE浏览器的从左向右从右向左是 writing-mode: tb-rl；*/

}

十轮霜影转庭梧，此夕羁人独向隅。

未必素娥无怅恨，玉蟾清冷桂花孤。

效果如下：

这种方法兼容性不好，只有在IE浏览器中才能支持，所以并不推荐使用。

方法二：设置文字对象宽度

对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。

test

.one {

width: 52px;

margin: 0 auto;

line-height: 56px;

font-size: 50px;

}

中秋月

注意：英文的时候需要加上这句word-wrap: break-word;自动换行。

说明：对文字DIV设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。

效果如下：

html5css字竖着显示,css如何设置竖排文字？相关推荐

div css纵向显示 html,css如何设置竖排文字？
有时候网页中的文字因为特别要求不能横向显示,这时候所需要的就是让文字来竖排显示,那么,网页中如何让文字竖排显示呢?接下来本篇文章将介绍css实现文字竖排显示的方法,希望对大家有所帮助. 方法一:使用w ...
word里文字竖向排列（设置竖排文字）
word里文字竖向排列(设置竖排文字) 目录 word里文字竖向排列(设置竖排文字) 1.整篇的文字需要竖排,点击菜单栏中[页面布局][文字方向] 2.如果想要部分文字竖排 ,首先选中文字,点击菜单栏 ...
设置字的间距php,css letter-spacing设置字间距属性
css letter-spacing设置字间距属性有需要的朋友可参考一下. 定义和用法 letter-spacing 属性增加或减少字符间的空白(字符间距). 该属性定义了在文本字符框之间插入多少空 ...
在html中字怎么修改位置,css怎么设置字体位置？
css怎么设置字体位置?下面本篇文章给大家介绍一下使用CSS设置字体位置的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:使用text-align属性设置字体的位置 t ...
excel怎么能把字竖着打出来_excel怎么把文字竖着打
1.怎样在excel中把文字竖着打看怎么个竖法了. 有一种竖法是必须用字体才能打出来的,但是每个字都是躺着的. 另一种竖法,就要设置单元格格式,那样打出来的字,既可以立着,也可以躺着. 具体操作.在 ...
用CSS实现设置网页文字为只读，不可复制的方法
设置网页文字不可复制的方法,除了我们知道的用JS实现外,还可以用css实现. JS实现网页复制监听请做电梯在css中,可以给body元素设置"user-select:none;" ...
css文字竖直显示_CSS属性设置 -- 盒子模型
Ⅰ 简介 HTML文档中的每个元素都被比喻成盒子,盒子模型通过四个边界来描述 margin -- 外边距,一个相框与另外一个相框之间的距离 border -- 边框,边框指的就是相框 padding ...
html 背景图片不重复显示,css如何设置背景图片不重复？
css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性background-repeat: no-repeat;进行设置. css使用b ...
html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...
电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...
html css 边框不显示,css怎么设置不显示下边框？
css边框样式属性是border,使用border即可让div或span或h1.p等对象实现需要的边框样式.下面我们来看一下css设置不显示下边框的方法. css可以使用border属性设置边框样式, ...

html5css字竖着显示,css如何设置竖排文字？

html5css字竖着显示,css如何设置竖排文字？相关推荐

最新文章

热门文章