html 或者 css 怎么样可以让字符串纵向显示
writing-mode:tb-rl;layout-flow:vertical-ideographic;上面两个貌似达不到我要的效果。。如果遇到数字或者字母就会出问题。。...
writing-mode:tb-rl;
layout-flow:vertical-ideographic;
上面两个貌似达不到我要的效果。。如果遇到数字或者字母就会出问题。。文字会倒下来。。
我要文字竖着纵向显示的那种 展开
layout-flow:vertical-ideographic;
上面两个貌似达不到我要的效果。。如果遇到数字或者字母就会出问题。。文字会倒下来。。
我要文字竖着纵向显示的那种 展开
6个回答
展开全部
一、原始使用writing-mode属性-
语法：writing-mode:lr-tb或writing-mode:tb-rl
参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性。
二、使用CSS模拟文字竖排
对文字对象宽度设置只能排下一个文字的宽度距离，让文字一行排不下两个文字使其文字自动换行，就形成了竖立排版需求。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body{text-align:center}
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}
</style>
</head>
<body>
<div class="shuli">我是竖列排版</div>
</body>
</html>
说明：对文字DIV设置较小的宽度，以达到一排只能排下一个文字，这样文字就自动换行，实现垂直竖列排版。
三、使用br换行让其文字垂直竖排显示
利用html br换行标签实现文字换行，对每个文字后加上换行br标签让其竖列排版。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body{text-align:center; line-height:22px}
/* CSS注释说明：设置css文字居中，css行高为22px间隔 */
</style>
</head>
<body>
我<br>是<br>竖<br>列<br>排<br>版
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把空间就留一个字体的宽带，比如5px，就自然纵向显示了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
writing-mode:tb-rl;text-align:left;
试试这样 行不，不过仅仅对IE有效 FF只能限制div宽度并用wordbreak强制换行
不行的话推荐你看看下面那位博主的方法
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、div宽度仅够1个字符，那么里面的字必然是竖向的。
2、要精确控制，那么就建立一列竖向的表格，把文字拆分成一个个的，逐个插入到竖向的表格内容中。
上面的css做法，并不是控制文字的，而是控制元素的。所以还是得从元素的宽度、排列上找方法。
2、要精确控制，那么就建立一列竖向的表格，把文字拆分成一个个的，逐个插入到竖向的表格内容中。
上面的css做法，并不是控制文字的，而是控制元素的。所以还是得从元素的宽度、排列上找方法。
追问
我的字符串里遇到括号又要倒下来才行。。有没有什么通用一点的方法啊。。
追答
你说的倒下来是指将 （ 转换成 ＾形状的括号吗？
那么不行就做个与字同宽高的span元素，span内容就是那个上括号，用js遍历去替换括号，也是挺简单的。
竖向排列现在浏览器支持的并不好，要是好的话，瀑布流就容易多了。
所以妥妥的限制宽度吧。
举例来说，就当做一个竖向表格，多行1列，先把字符串写到js变量里，split拆分成数组，做循环一个个的插入，或者新建tr-td插入，检验括号并替换，这样就是个通用插件了。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2015-12-03 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
<div class=zx>这是一个纵向排列的行</div>
.zx 如下定义
.zx {writing-mode:tb-rl;text-align:left;}
当然你也可以在每个汉字后加一个换行符
比如
<p>床</br>前</br>明</br>月</br>光</br><p>
.zx 如下定义
.zx {writing-mode:tb-rl;text-align:left;}
当然你也可以在每个汉字后加一个换行符
比如
<p>床</br>前</br>明</br>月</br>光</br><p>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
