css文字如何竖排显示？

css文字竖排显示的方法一：

使用writing-mode属性

语法：writing-mode:lr-tb或writing-mode:tb-rl

参数：lr-tb：从左向右，从上往下；tb-rl：从上往下，从右向左。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

</head>

<style>

.one{

margin:0auto;

height:140px;

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

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

}

</style>

<body>

<divclass="one">十轮霜影转庭梧，此夕羁人独向隅。

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

</body>

</html>

css文字竖排显示效果如下：

2345截图20180918134335.png

这种方法兼容性不好，只有在IE浏览器中才能支持，所以并不推荐使用，这里就不过多介绍要想了解更多可以参考css在线手册。

css文字竖排显示的方法二：

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

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

</head>

<style>

.one{

width:52px;

margin:0auto;

line-height:56px;

font-size:50px;

}

</style>

<body>

<divclass="one">中秋月</div>

</body>

</html>

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

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

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c57125.shtml