css属性让网页文字实现竖排的几种方法
发布时间：2012-12-07 16:16:41 作者：佚名 
我要评论
我要评论网页布局中遇到一些特殊效果显示比如：让网页文字实现竖排,很是疑惑，于是乎搜集整理一下，实现代码如下，需要的朋友可以参考下
以下几种都是用样式style里的属性
1.layout-flow : horizontal | vertical-ideographic
参数：
horizontal : 对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系
vertical-ideographic : 对象中的内容自上而下流入，下一行在前一行左面。这个值适于亚洲语系在制作网页的时候我觉得用这个比较好，
2.word-break : normal | break-all | keep-all
用 keep-all 他可以不让蒙文在排不满的时候断字，但是下行不怎么整齐。
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
3.style里的 position:absolute;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 属性也可以让文字竖排。
这里提供2类3种解决办法
1：使用flash+xml实现。
将内容放到xml内，在flash内读取并加载到设置好的场景中。text设置文字方向。
2：使用html页面内swf后缀实现。
例：＜param name="movie" value="index.swf?name=文字内容"/＞
其他基本上与第一个一样。
as3获取地址swf后的参数问题
3：给p定宽定高来实现文字竖排。(汉字哦)
首先确认单位，使用em，设置p的高，假设为20em，那么一列就是20个字符。
CSS
引用
＃content{overflow:hidden;clear:both;text-align:right}/*text-align表示文字起始方向，左或右。*/
＃content p{font-size:14px;width:1.2em;display:inline;text-align:center;line-height:1.5em;}
HTML
引用
＜div id="content">
＜p>内容在这里＜/p＞
＜p>内容在这里＜/p＞
＜p>内容在这里＜/p＞
＜/div＞
这样的话，content内不能有图片，开始有个＜p＞，结束有个＜/p＞,然后使用js找到第20、40、60、80...个字，在后边加＜/p＞＜p＞,碰到br也替换成＜/p＞＜p＞
这个替换好像很熟悉，哦，在这里让用户更好的编辑文本
1.layout-flow : horizontal | vertical-ideographic
参数：
horizontal : 对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系
vertical-ideographic : 对象中的内容自上而下流入，下一行在前一行左面。这个值适于亚洲语系在制作网页的时候我觉得用这个比较好，
2.word-break : normal | break-all | keep-all
用 keep-all 他可以不让蒙文在排不满的时候断字，但是下行不怎么整齐。
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
3.style里的 position:absolute;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 属性也可以让文字竖排。
这里提供2类3种解决办法
1：使用flash+xml实现。
将内容放到xml内，在flash内读取并加载到设置好的场景中。text设置文字方向。
2：使用html页面内swf后缀实现。
例：＜param name="movie" value="index.swf?name=文字内容"/＞
其他基本上与第一个一样。
as3获取地址swf后的参数问题
3：给p定宽定高来实现文字竖排。(汉字哦)
首先确认单位，使用em，设置p的高，假设为20em，那么一列就是20个字符。
CSS
引用
复制代码
代码如下:＃content{overflow:hidden;clear:both;text-align:right}/*text-align表示文字起始方向，左或右。*/
＃content p{font-size:14px;width:1.2em;display:inline;text-align:center;line-height:1.5em;}
HTML
引用
复制代码
代码如下:＜div id="content">
＜p>内容在这里＜/p＞
＜p>内容在这里＜/p＞
＜p>内容在这里＜/p＞
＜/div＞
这样的话，content内不能有图片，开始有个＜p＞，结束有个＜/p＞,然后使用js找到第20、40、60、80...个字，在后边加＜/p＞＜p＞,碰到br也替换成＜/p＞＜p＞
这个替换好像很熟悉，哦，在这里让用户更好的编辑文本
相关文章
本文介绍了div 图片如何在DIV内水平居中，无论文字居中、图片居中等内容居中我们都可以使用以上两种方法实现，一般推荐使用CSS进行，但网页多时候，我们只需要修改CSS文件2021-11-30
DIV半透明实现，使用CSS实现DIV成半透明效果，CSS实现层与背景半透明效果。本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-11-30
新手在使用web标准（div css）开发网页的时候，遇到第一个问题是div与span有什么区别，什么时候用div，什么时候用span标签。下面小编就通过本文给大家讲解下，感兴趣的朋友2021-11-30
这篇文章主要介绍了设置div背景透明的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-02-20
这篇文章主要介绍了CSS实现div不设高度完全居中，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-02-04
这篇文章主要介绍了div自适应高度自动填充剩余高度,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-07-08- 这篇文章主要介绍了DIV+CSS的命名规矩才能有利于SEO优化的实现方法,需要的朋友可以参考下2018-11-15
- 这篇文章主要介绍了DIV或者DIV里面的图片水平与垂直居中的方法,需要的朋友可以参考下2018-11-15
这篇文章主要介绍了详解如何用div实现自制滚动条,滚动条是浏览器中最常见的组件了。想要学习如何自制滚动条的方法，需要了解的朋友可以参考下2018-03-21- Div布局是学习的重点，这篇文章主要为大家详细介绍了div对齐与网页布局的相关学习资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-31
最新评论