垂直文本方向

Posted 2023-03-05

【中文标题】垂直文本方向

【英文标题】：Vertical Text Direction

【发布时间】：2011-05-14 22:51:36

【问题描述】：

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

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

【问题讨论】：

您好，您能否查看您接受的答案以符合非过时的语法以提高质量。您的问题被视为重复，

【参考方案1】：

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

p  writing-mode: tb-rl; 

【讨论】：

我找到了这个：generatedcontent.org/post/45384206019/writing-modes。虽然感觉很hacky。

@CrystalMiller 和顺便说一句，w3schools 可以是一个很好的帮手，但它不是源/原始文档（所以它可能会遗漏一些东西），“官方”是 w3.org，或者最接近的，更易于阅读，对它来说是 Mozilla 的开发者网络 - “MDN” - developer.mozilla.org

它适用于 chrome、mozilla 和 IE edge，但不适用于 windows 的 safari。

tb-rl 已弃用，请改用vertical-rl。

遗憾的是，如果垂直文本位于屏幕左侧，则大多数罗马文本​​都是从下到上阅读的。如果文本在屏幕右侧，则从上到下。弃用了一些值，我们最终得到了屏幕右侧从上到下的唯一垂直rl。对于左侧，我们必须添加一个变换：rotate(180deg);

【参考方案2】：

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

【讨论】：

如果没有 'position' 属性，属性 'bottom' 就没有价值。

我需要添加 -ms-transform:rotate(90deg);让它在 IE11 中工作

根据developer.mozilla.org/en-US/docs/Web/CSS/writing-mode，writing-mode:tb-rl; 已弃用。请改用writing-mode:vertical-rl！

【参考方案3】：

我正在搜索实际的垂直文本，而不是 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! 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（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 Compatible.

【讨论】：

我可以让文本垂直居中对齐吗？

我不太明白你所说的对齐中心是什么意思，但也许你可以将容器元素.vericaltext 对齐到中心？

对相同结果的另一种可能解决方案：***.com/a/60136214/3934058 感谢您提供空格提示；）

有关答案如何随时间演变的信息，因为它可能有助于某人更好地理解。我也相信图像更适合用户体验，因为人们不必单击run code snippet 按钮即可查看此答案所提供的内容

【参考方案4】：

将文本旋转 90 度：

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

另外，span 标签似乎不能在不设置为 display:block 的情况下旋转。

【讨论】：

可能需要与 display:block;正确旋转

我把它应用到了一个位于

内的 。它似乎在所有浏览器中成功旋转。 ... ... 但是，一旦 div 旋转（90 度）， td 不会扩大其高度。

【参考方案5】：

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

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

【参考方案6】：

要垂直显示文本（自下而上），我们可以简单地使用：

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

属性的信息

【参考方案7】：

尝试使用：

writing-mode: lr-tb;

【参考方案8】：

#myDiv
text-align: center;


#mySpan
writing-mode: vertical-lr; 
transform: rotate(180deg);

<div id="myDiv"> 

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

</div>

【参考方案9】：

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

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

【讨论】：

transform-origin 是我需要的！

向左浮动是我需要的！

【参考方案10】：

旋转，就像你做的那样，是要走的路 - 但请注意，并非所有浏览器都支持。如果您不想获得跨浏览器的解决方案，则必须为此生成图片。

【参考方案11】：

可以使用 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 */

【参考方案12】：

添加类

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

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

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

【参考方案13】：

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

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

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

【参考方案14】：

这里是一些 SVG 代码的示例，我用来将三行垂直文本放入表格列标题中。稍加调整就可以实现其他角度。我相信现在大多数浏览器都支持 SVG。

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

【参考方案15】：

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

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

【参考方案16】：

如果你想要像

这样的对齐方式

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>

请注意，在我的示例中，印地语有一个口音，它将被呈现为单个字符。这是我在使用此解决方案时遇到的唯一问题。

【参考方案17】：

你也这样做......

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

【参考方案18】：

最好的解决方案是使用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

【参考方案19】：

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

【参考方案20】：

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

【讨论】：

你可以改变变换：rotate(270deg);变换：旋转（90度）；根据要求

【参考方案21】：

来自developer.mozilla.org

text-orientation CSS 属性设置一行中文本字符的方向。它只影响垂直模式下的文本（当 write-mode 不是 Horizo​​ntal-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;

【参考方案22】：

您可以使用 word-wrap:break-word 来获取垂直文本 使用以下 sn-pe

HTML：

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

css:

.verticalText 
word-wrap: break-word;
  font-size: 18px;

.mydiv 
  height: 300px;
  width: 10px;

【参考方案23】：

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

【参考方案24】：

h1word-break:break-all;display:block;width:40px; 

H E L L O

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

【参考方案25】：

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

我尝试了 CSS 转换，但在转换原点方面遇到了很多麻烦；最后得到了一个 SVG 文件。大概花了 10 分钟，我也可以用 CSS 稍微控制一下。

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

【参考方案26】：

这也有效：

transform: rotate(90deg);

【讨论】：

两年前***.com/a/12482721/1549818 的重复答案

【参考方案27】：

你可以这样试试

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

【参考方案28】：

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

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>