FireFox如何让文字垂直显示?

lzheng2001 2008-02-13 11:56:48

...全文

1659 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

definaim 2011-08-18

打赏
举报

我的方案是ie和webkit系的用writing-mode,firefox和opera用multi-column，webkit的writing-mode使用略和ie有不同:

-webkit-writing-mode:vertical-rl; /*webkit*/
writing-mode:tb-rl; /*ie*/

http://blog.idea5.org/css-chinese-words-writing-vertically-width-column.html

一把编程的菜刀 2008-02-21

打赏
举报

垂直对齐：vertical-align
语法：{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
说明：
·inherit 继承
·top 顶对齐
·bottom 底对齐
·text-top 相对文本顶对齐
·text-bottom 相对文本底对齐
·baseline 基准线对齐
·middle 中心对齐
·sub 以下标的形式显示
·super 以上标的形式显示
注意：文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。
例子：10<span style="vertical-align:sub">5</span>　105 　10<span style="vertical-align:super">5</span> 105
书写方式：writing-mode
语法：{writing-mode:lr-tb|tb-rl}
作用：文字的书写方式
说明：
·lr-tb 从左向左，从上往下
·tb-rl: 从上往下，从右向左</h6></ul></blockquqte></p></h6></h1></ul></blockquqte></p>

这个好象都是IE有的，FF都不行

一把编程的菜刀 2008-02-21

打赏
举报

哎，<style>
#dy {border:1 solid #630;
writing-mode: tb-rl}
</style>
<span id="dy">
测试需要垂直显示的文字 TEST BY
</span>

writing-mode: tb-rl
FF中不支持这个，以上简单的代码就可以实现你要的效果，但是限制在IE中
好象是IE的专门属性

lzheng2001 2008-02-20

打赏
举报

谢谢楼上的,但你给的代码在ff上没效果!

cloudgamer 2008-02-14

打赏
举报

问题是ff根本没有办法把字横过来

咆哮砸门男 2008-02-14

打赏
举报

要在布局上下功夫才行，在难的效果也可以实现的！

一把编程的菜刀 2008-02-14

打赏
举报

lr-tb 默认的对象方向，即从左到右，从上到下的顺序
tb-rl 对象的排列方式为从上到下，从右向左排列。中文文字方向朝上，英文文字顺时针旋转90度。

代码如下：
<div id=test style="POSITION: relative">8月14日，俄罗斯国防部……船员已全部遇难。</div>
<SCRIPT language=JavaScript>
document.onclick = rotate; function rotate() {
if (test.style.writingMode == "lr-tb") {
test.style.writingMode = "tb-rl";
}
else {
test.style.writingMode = "lr-tb";
}
}
</SCRIPT>

呵呵，不知道这个可以不
我没测试过
这个是点击后文字就转了！

一把编程的菜刀 2008-02-14

打赏
举报

<input id=test style="POSITION: relative" value='让文字在页面上90度，180度翻转'>

<SCRIPT language=JavaScript>

document.onclick = rotate; function rotate() {

if (test.style.writingMode == "lr-tb") {

test.style.writingMode = "tb-rl";

}

else {

test.style.writingMode = "lr-tb";

}

}

</SCRIPT>

这个对你会有启发吗？有帮助吗？

一把编程的菜刀 2008-02-14

打赏
举报

<span style="FILTER: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); height: 1px">
这样不就行了，当Rotation=1时代表顺时针转九十度。
</span>
留个做记号

一把编程的菜刀 2008-02-14

打赏
举报

汗！你这个是从右到左得垂直显示啊
没注意，不好意思

lzheng2001 2008-02-14

打赏
举报

试了8楼的,没有效果.

只能跟用户说FF暂时不能实现这个效果了.

一把编程的菜刀 2008-02-14

打赏
举报

<title> DIV中文字垂直居中 </title> 

  <style   type="text/css"> 

  /*定义最外层*/ 

  #outer{position:relative;width:300px;height:200px;border:1px   solid   #000;} 

  /*for   ie*/ 

  #middle{position:absolute;top:50%;} 

  #inner{position:relative;top:-50%;width:100%;text-align:center;} 

  /*for   firefox*/ 

  #outer[id]{position:static;display:table;} 

  #middle[id]{position:static;display:table-cell;vertical-align:middle;} 

  </style> 

  </head> 

  <body> 

  <div   id="outer"> <div   id="middle"> <div   id="inner"> 文字垂直居中 </div> </div> </div> 

  </body> 

  </html>

ydlchina 2008-02-13

打赏
举报

挺难的

cloudgamer 2008-02-13

打赏
举报

以前搞过
貌似ff暂时没有办法

yixianggao 2008-02-13

打赏
举报

凑合看，哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style>       

#dy

{

    font-family: Courier New;

    background-color: yellow;

    font-size: 14px;

    width: 14px;

    word-wrap: break-word;

}       

    </style>       

    <div id="dy">       

    测试需要垂直显示的文字 T E S T B Y   

    </div> 

</head>

<body>

    

</body>

</html>