垂直文本方向

时间：2010-11-24 07:52:43

标签： html css text vertical-alignment

我一直在尝试将文字放在垂直方向，就像我们在ms-word表格中所做的一样，但到目前为止我只能做THIS ...我不满意因为它是一个框已旋转...是否有办法获得实际的垂直方向文字？

我只在演示中将旋转设置为305度，这不会使文本垂直。 270deg但我只是让演示显示轮换。

28 个答案:

答案 0 :(得分：94)

替代方法：http://www.thecssninja.com/css/real-text-rotation-with-css 

p { writing-mode: tb-rl; }

答案 1 :(得分：75)

-webkit-transform: rotate(90deg);

其他答案是正确的，但它们导致了一些对齐问题。尝试不同的东西时，这个CSS片段代码对我来说非常合适。 

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}

答案 2 :(得分：57)

我正在搜索实际的垂直文本而不是HTML中的旋转文本，如下所示。所以我可以通过使用以下方法来实现它。

enter image description here 的 HTML： - 

<p class="vericaltext">
Hi This is Vertical Text!
</p>

<强> CSS： - 

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle! Demo.

更新： - 如果您需要显示空白，请将以下属性添加到您的CSS中。

white-space: pre;

所以，css类应该是

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

<强> JSFiddle! Demo With Whitespace

更新2 （28-JUN-2015）

由于white-space: pre;似乎无法在Firefox上运行（针对此特定用途）（截至目前），只需将该行更改为

white-space: pre-wrap;

所以，css类应该是

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

JsFiddle Demo FF Compatible.

答案 3 :(得分：25)

将文字旋转90度：

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

此外，如果未设置为display：block。

，则无法旋转span标记

答案 4 :(得分：9)

对于在firefox中使用下面另一个字符的垂直文本：

text-orientation: upright;
writing-mode: vertical-rl;

答案 5 :(得分：7)

尝试使用：

writing-mode: lr-tb;

答案 6 :(得分：3)

我是新手，对我帮助很大。只需更改宽度，高度，顶部和左侧以使其适合：

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

你也可以去here看另一种方法。作者这样做：

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

答案 7 :(得分：2)

可以使用CSS3转换属性

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

答案 8 :(得分：2)

添加课程

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

我每天都使用它，并且没有任何问题。

https://css-tricks.com/snippets/css/text-rotation/

答案 9 :(得分：2)

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

enter image description here

答案 10 :(得分：2)

要以垂直方式显示文字（自上而下），我们只需使用：

writing-mode: vertical-lr; 

transform: rotate(180deg);


#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

请注意，我们可以添加此项以确保浏览器兼容性：

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

我们还可以在Mozilla docs.

上阅读有关 writing-mode 属性的更多信息

答案 11 :(得分：2)

像你一样，

旋转是要走的路 - 但请注意，并非所有浏览器都支持这种方式。如果你想获得一个跨浏览器的解决方案，你将不得不为此生成图片。

答案 12 :(得分：2)

以下是一些SVG代码示例，我用它将三行垂直文本放入表格列标题中。通过一些调整可以实现其他角度。我相信大多数浏览器最近都支持SVG。

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

答案 13 :(得分：1)

最佳解决方案是使用writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

它定义文本行是水平放置还是垂直放置以及块进展的方向。

它具有良好的浏览器支持，但不适用于IE8（如果你关心IE） http://caniuse.com/#feat=css-writing-mode

答案 14 :(得分：1)

来自developer.mozilla.org

text-orientation CSS属性设置一行中文本字符的方向。它只影响垂直模式下的文本（当书写模式不是水平tb时）。这对于控制使用垂直脚本的语言的显示以及制作垂直表标题很有用。

writing-mode: vertical-rl;
text-orientation: mixed;

您还可以在此处查看所有语法

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

答案 15 :(得分：1)

如果您想要

S
T
A
R
T

然后关注https://www.w3.org/International/articles/vertical-text/#upright-latin

示例： 

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}
<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

请注意，在我的示例中，印地语带有重音符号，并且将被渲染为单个字符。这是我面对此解决方案的唯一问题。

答案 16 :(得分：1)

我已经设法找到了一个有效的解决方案：

（我在middleItem类div中有一个标题）

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

答案 17 :(得分：1)

这也有效：

transform: rotate(90deg);

答案 18 :(得分：0)

尝试使用SVG文件，它似乎具有更好的浏览器兼容性，并且不会破坏您的响应式设计。

我尝试了CSS变换，并且在变换原点上遇到了很多麻烦;并最终得到一个SVG文件。花了大约10分钟，我也可以用CSS控制它。

如果您没有Adobe Illustrator，可以使用Inkscape制作SVG。

答案 19 :(得分：0)

h1{word-break:break-all;display:block;width:40px;}

H E L L O

注意：支持浏览器 - IE浏览器（8,9,10,11） - Firefox浏览器（38,39,40,41,42,43,44） - Chrome浏览器（44,45,46,47,48） - Safari浏览器（8,9） - Opera浏览器（不支持） - Android浏览器（44）

答案 20 :(得分：0)

您可以使用以下CSS属性实现相同的目的：

writing-mode: vertical-rl;
text-orientation: upright;

答案 21 :(得分：0)

您可以尝试这样

-webkit-transform: rotate(270deg);   
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);

答案 22 :(得分：0)

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
}

答案 23 :(得分：0)

<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>It’s all in the curd</h2>
    </body>
</html>

答案 24 :(得分：0)

您可以使用自动换行：break-word来获取垂直文本 使用以下代码段

HTML：

<div class='verticalText mydiv'>Here is your text</div>

的CSS：

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

答案 25 :(得分：0)

您也可以这样做... 

.p{
   writing-mode: vertical-rl;
   text-orientation: upright;
 }

答案 26 :(得分：-1)

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

答案 27 :(得分：-2)

这有点hacky但是跨浏览器解决方案，不需要css 

<div>
    <div>h</div>
    <div>e</div>
    <div>l</div>
    <div>l</div>
    <div>o</div>
<div>
相关问题
最新问题