自定义textarea的文本对齐方式

时间:2013-04-22 07:00:44

标签: html css html5 css3

我的国家剧本是垂直书写的,从左到右对齐。

我需要根据此要求自定义textarea的文字对齐方式。

默认情况下,textarea中的文字是水平书写的,从上到下对齐。我用这篇文章附上了我国家剧本的照片。

知道我是怎么做到的吗?如何自定义文本区域的文本对齐方式?

抱歉我的英语不好。

enter image description here

2 个答案:

答案 0 :(得分:3)

我认为你的意思是写作模式而不是对齐方式:你需要让浏览器显示文本,以便文本在一行中垂直运行,从上到下,从左到右排列。

目前这似乎是不可能的。但是,您可以使用可编辑的div元素而不是textarea在某些浏览器中获得所需的效果。

根据CSS Writing Modes Module Level 3草稿,您只需设置writing-mode: vertical-lr即可。似乎还没有实现,但IE有自己的版本,具有不同的属性值,Chrome现在支持该属性,但只有供应商前缀。

然而,尽管一般来说浏览器支持一些设置,但它似乎不适用于textarea:在IE中,文本垂直运行但行从右到左运行,第一个线位于该区域的右侧;在Chrome中,文本水平运行。原因可能是textarea元素具有与写入模式的实现冲突的特殊实现。

示例代码(您可能需要调整字体设置以使用包含蒙古字母的字体来查看此内容):

<style>
div,
textarea {
  writing-mode: tb-lr;
  -moz-writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
}
</style>
<textarea rows=7 cols=7>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ ᠤᠯᠠᠭᠠᠨᠪᠠᠭᠠᠲᠤᠷ</textarea>
<div style="width: 5em; height: 4em; border: solid blue 1px">
ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ ᠤᠯᠠᠭᠠᠨᠪᠠᠭᠠᠲᠤᠷ
</div>

因此,在我的测试中,div在IE和Chrome中看起来没问题,但textarea没有。所以也许你可以使用<div contenteditable>和一些JavaScript在表单提交时将div内容复制到隐藏字段(如果这是为了将表单提交给服务器端处理)。

这是它在IE上的工作原理:

enter image description here

答案 1 :(得分:0)

嗯,Firefox 38可以支持writing-mode: vertical-lr而不带任何前缀,但您必须在about:config页面中启用此参数:layout.css.vertical-text.enabled

请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode