网页css实现文字竖向排版的几种方法

下面介绍几种使用Css实现文字竖向排版的方法：

1.一个句子的竖向排列

如图：

<!DOCTYPE html>

<html>

<head>

</head>

<style>

.one {

width: 20px;

margin: 0 auto;

line-height: 24px;

font-size: 20px;

}

.two {

width: 15px;

margin: 0 auto;

line-height: 24px;

font-size: 20px;

word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/

}

</style>

<body>

<div class="one">我是竖列排版</div>

<div class="two">I AM ENGLISH</div>

</body>

</html>

2.多个句子竖向排列（如古诗）

如图：

<!DOCTYPE html>

<html>

<head>

</head>

<style>

.one {

margin: 0 auto;

height: 140px;

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

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

}

</style>

<body>

<div class="one">欲话毗陵君反袂，欲言夏口我沾衣。谁知临老相逢日，悲叹声多语笑稀。</div>

<div class="one">I AM ENGLISH</div>

</body>

</html>

3.字体横行，整体竖向排版

<!DOCTYPE html>

<html>

<head>

</head>

<style>

.one {

margin: 150px auto;

width: 200px;

font-size: 20px;

line-height: 24px;

transform:rotate(90deg);

-ms-transform:rotate(90deg); /* IE 9 */

-moz-transform:rotate(90deg); /* Firefox */

-webkit-transform:rotate(90deg); /* Safari 和 Chrome */

-o-transform:rotate(90deg); /* Opera */

}

</style>

<body>

<div class="one">欲话毗陵君反袂</div>

<div class="one">ENGLISH</div>

</body>

</html>

原文链接：CSS几种简单方法实现文字竖向排版 - 消逝的风i - 博客园

网页css实现文字竖向排版的几种方法相关推荐

php实现一行省略号,css实现文字溢出省略号的四种方法（附代码）
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...
css实现文字竖向排版
1.一个句子的竖向排列 <!DOCTYPE html> <html> <head> <title>test</title> <meta ...
html字体纵向排列,使用writing-mode让文字竖向排版
通常我们网页上的文字在缺省状况下是从左到右横向排版的,但有些情况下,为了排版效果,或为了更好的利用页面空间,我们需要将文字竖向排版.以前有一种很土的方法,就是让文字的容器只有一个文字的宽度,挤的文字竖 ...
html5文字横向变纵向,使用writing-mode让文字竖向排版
通常我们网页上的文字在缺省状况下是从左到右横向排版的,但有些情况下,为了排版效果,或为了更好的利用页面空间,我们需要将文字竖向排版.以前有一种很土的方法,就是让文字的容器只有一个文字的宽度,挤的文字竖 ...
css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)
CSS实现文字半透明显示在图片上方法在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
html分割线自动适应,CSS实现自适应分隔线的N种方法
CSS实现自适应分隔线的N种方法分割线是网页中比较常见的一类设计了, 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景 ...
html边框直线代码,网页制作学习：实现细线边框的两种方法_html
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格.这样不仅有利于网页的维护,同时,提高了网页的观赏性.在众多网页制作风格中,细边框这个制作方法是必不可少的.这里,我将简单地谈一下细边框的 ...
html按钮disabled状态,CSS定义input disabled样式的三种方法
表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三 ...
js中当等于最小值是让代码不执行_网页中JS函数自动执行常用三种方法
本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: 2.在JS语句调用: function myfun ...

网页css实现文字竖向排版的几种方法

网页css实现文字竖向排版的几种方法相关推荐

最新文章

热门文章