垂直文字方向

106

我一直在尝试像在ms-word表中那样将文本沿垂直方向移动，但到目前为止，我只能做到这一点 ……我不满意，因为它是一个旋转的盒子……是不是有没有办法获得实际的垂直方向文字？

我仅在演示中将旋转设置为305度，这不会使文本垂直。270deg会，但我只是制作了演示以展示旋转效果。

html  css  text  vertical-alignment 
— 月亮
source
您好，您能否查看您接受的答案以采用非过时的语法来提高质量？你的问题被看作是一个副本，
— G-Cyrillus

Answers:

107

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

p { writing-mode: tb-rl; }
— 天鹅
source
2
我找到了：generatecontent.org/post/45384206019/writing-modes。虽然感觉很hacky。
— Crystal Miller
7
@CrystalMiller和BTW，w3schools可以是一个很好的帮手，但它不是源/原始文档（因此它可能会遗漏某些东西），“官方”是w3.org，或者是与之最接近，更易理解的文档是Mozilla的开发者网络- “MDN” - developer.mozilla.org
— jave.web
它适用于chrome，mozilla和IE edge，但不适用于Windows的safari。
— kushalvm
8
tb-rl已弃用，请vertical-rl改用。
— 贾里德·朱
3
可悲的是，如果垂直文本位于屏幕的左侧，则大多数罗马文本​​都是从下至上阅读的。如果文本在屏幕右侧，则从上到下。在弃用某些值的情况下，我们最终得到了唯一的vertical-rl，它在屏幕的右侧从上到下。对于左侧，我们必须添加一个转换：rotate（180deg）;
— Kir Kanos
80 
-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;
}
— 阿米特
source
9
如果没有“位置”属性，则“底部”属性没有任何价值。
— Crystal Miller
2
我需要添加-ms-transform：rotate（90deg）; 使其在IE11中工作
— patrickbadley 2014年
1
根据developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode的规定，writing-mode:tb-rl;已弃用。使用writing-mode:vertical-rl，而不是！
— steffen
64

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

在此处输入图片说明 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！演示

更新：-如果需要显示空格，则将以下属性添加到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！带空白演示

更新2（2015年6月28日）

由于 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兼容。

— 穆罕默德·阿卜杜勒·穆吉布
source
我可以使文本垂直居中对齐吗？
— Mohammad Saifullah
对齐中心并不能完全理解您的意思，但是也许您可以将容器元素对齐.vericaltext中心？
— Mohd Abdul Mujib
1
难以置信。应该将其打勾为绿色。希望OP可以将其标记为他仍然活跃在SO上。
— 拉胡尔
：D旧的冷答案
— Kapil Yadav
我也有一些新鲜的热：p
— Mohd Abdul Mujib，
27

要将文本旋转90度：

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

同样，似乎将span标签设置为display：block也无法旋转。

— 布朗
source
4
<span>可能需要与display：block;一起使用。正确旋转
— Mladen Janjetovic
2
我将其应用于位于<td>内的<div>。它似乎可以在所有浏览器中成功旋转。……但是，一旦div旋转（90度），则td不会扩展其高度。
— dsdsdsdsd 2013年
11

对于在firefox中具有一个接一个的字符的垂直文本，请使用：

text-orientation: upright;
writing-mode: vertical-rl;
— 伊吉
source
5

要以垂直（底部）显示文本，我们可以简单地使用：

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);

我们也可以writing-mode在Mozilla文档上阅读有关属性的更多信息。

— 阿卜杜拉·奥卡沙（Abdallah Okasha）
source
4 

#myDiv{
text-align: center;
}

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

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

</div>
展开摘要

在此处输入图片说明

— 维沙尔·辛格
source
您好，谢谢您尝试回答这个问题，能否简要说明您的解决方案如何解决OP的问题？
— 黄沾-恢复莫妮卡
3

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

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

您也可以在这里查看另一种方法。作者这样做是这样的：

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
— 缺口
source
我需要的是transform-origin！
— xtian
向左浮动是我所需要的！
— 克里斯，
2

像您一样，轮换是一种解决方法-但请注意，并非所有浏览器都支持这种方式。如果您不想获得跨浏览器的解决方案，则必须为此生成图片。

— 厄齐
source
2

可以使用CSS3的Transform属性

.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 */
}
— 萨迪
source
2

我已经设法有了一个可行的解决方案：

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

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}
— RVA
source
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>
— 尼尔·鲍尔斯
source
1 
<!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>
— 萨钦·伯纳瓦尔
source
您可以更改变换：rotate（270deg）; 转换：rotate（90deg）; 根据要求
— sachin burnawal
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>
展开摘要

请注意，在我的示例中，印地语带有重音，并且将以单个字符的形式呈现。这是我面对该解决方案的唯一问题。

— 贝达·施密德
source
1

来自developer.mozilla.org

文本方向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;
— 优素福·阿塔夫（Yousef Altaf）
source
0

您可以使用word-wrap：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;
}
— 哈里·普拉桑德
source
0 

<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>

— y
source
0 
h1{word-break:break-all;display:block;width:40px;}

你好

注意：支持的 浏览器-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）

— 萨林
source
0

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

我尝试了CSS转换，但是在转换起源方面遇到了很多麻烦；并最终生成了SVG文件。大概花了10分钟，我也可以用CSS来控制它。

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

— 01
source
0

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

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>
展开摘要

— 卢克·普雷斯顿
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.