垂直的文本方向

我一直在尝试文字在垂直方向走,就像我们可以在MS字表中一样,但到目前为止,我只能做到这一点 …我不满意,因为它是一个旋转的盒子… Isn'有没有办法有实际的垂直方向的文字?

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

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

 p { writing-mode: tb-rl; } 
 -webkit-transform: rotate(90deg); 

其他答案是正确的,但他们导致一些alignment问题。 在尝试不同的事情这个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; } 

干杯!!!

我正在寻找一个实际的垂直文本,而不是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演示FF兼容。

旋转文字90度:

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

此外,似乎span标签不能被设置为显示:块。

尝试使用:

 writing-mode: lr-tb; 

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

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

轮换,就像你做的那样,是要走的路 – 但请注意,并非所有的浏览器都支持这一点。 如果你不想得到一个跨浏览器的解决scheme,你将不得不为此生成图片。

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

我是新的在这,它帮助了我..只是改变宽度,高度,顶部和左侧,以使其适合..

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

添加类

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

我每天都用这个,而且没有任何问题。

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

这也适用于:

 transform: rotate(90deg); 

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

下面是我用来将三行垂直文本放入表格列标题的一些SVG代码的示例。 其他angular度是可能的一点调整。 我相信现在大多数浏览器都支持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> 

你可以使用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; } 
 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)

尝试使用SVG文件,它似乎有更好的浏览器兼容性,并不会打破你的响应式devise。

我尝试了CSS转换,并且在转换起源方面遇到了很多麻烦。 并最终与一个SVG文件。 花了10分钟,我也可以用CSS控制一下。

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

我已经设法有这个工作的解决scheme:

(我有一个middleItem类div中的标题)

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

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

这是一个有点hacky,但不需要CSS的跨浏览器的解决scheme

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