CSS旋转文字垂直

本文介绍了CSS旋转文字垂直 - 双方的额外空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

当我使用TEXT旋转和内联图层时，它会在旋转中添加额外的空间（大文本的宽度），我不想修复。使用CSS旋转时，最好的方法是在两侧避免额外空间（元素的宽度）。

以下是我的代码：

.rotate {display：inline-block;白色空间：nowrap; transform：translate（0，100％）rotate（-90deg）; transform-origin：0 0; vertical-align：bottom;} rotate：before {content：;向左飘浮; margin-top：100％;}。rotate：after {content：;显示：inline-block;}

< div style = display：inline-block; position：relative;类= 旋转 > < span style =displock; width：100％; font-size：55px; color：＃222222; opacity：0.15; white-space：nowrap;> BACKGROUND< / span> < span style =display：block; width：100％; font-size：45px; color：＃222222; text-align：center;> TITLE< / span>< / div>接近旋转的元素这里的一些随机文本应该接近旋转元素这里的一些随机文本应该接近旋转的元素

解决方案

您可以尝试使用 写作

写作模式 CSS属性定义了文本行是水平还是垂直布局，以及块的进展方向。

codepen.io/gc-nomade/pen/rGJGzQ?editors=1100

.rotate {writing-mode：vertical-rl;变换：比例（-1）;宽度：50像素; margin-right：50px;} body {display：flex;对齐项：柔性端; }

< div style =display：inline-block ;位置：相对;类= 旋转 > < span style =displock; width：100％; font-size：55px; color：＃222222; opacity：0.15; white-space：nowrap;> BACKGROUND< / span> < span style =display：block; width：100％; font-size：45px; color：＃222222; text-align：center;> TITLE< / span>< / div>接近旋转的元素这里的一些随机文本应该接近旋转元素这里的一些随机文本应该接近旋转的元素

或 transform：rotate（-90deg） （这是你的第一选择），但用伪按照文本长度重置高度。 （这需要使用rgba（）颜色并将两行文本设置在一个容器中。 codepen.io/gc-nomade/pen/RLQLJG?editors=1100

.rotate {width：110px;}。rotate> span {display：inline-block; transform：rotate（-90deg）}。rotate：span：before { content：''; padding-top：100％; float：left;} body {display：flex; align-items：flex-end; justify-content：flex-start;}

< div style =display：inline-block; position：relative;class =rotate < span style =font-size：55px; color：rgba（0,0,0,0.15）; white-space：nowrap;> BACKGROUND< span style =display： BLO ck; font-size：45px; color：＃222222; text-align：center;> TITLE< / span>< / span> < / DIV>这里的一些randome文本应该接近旋转的元素这里的一些randome文本应该接近旋转的元素这里的一些randome文本应该接近旋转的元素

这两种技术在这里要求设置旋转文本容器的宽度，从柔性容器构建。它应该在IE，FF，Chrome中工作。 （ display：table / table-cell 可以是旧版浏览器的另一个 display 选项）

When I rotate and inline layer with TEXT, it adds extra space (width of large text) on the rotation, I dont want to fix. What is the best way to avoid extra space (width of element) on both sides when rotating with CSS.

Below is my Code:

.rotate { display: inline-block; white-space: nowrap; transform: translate(0, 100%) rotate(-90deg); transform-origin: 0 0; vertical-align: bottom; } .rotate:before { content: ""; float: left; margin-top: 100%; } .rotate:after { content: ""; display: inline-block; }

<div style="display:inline-block; position:relative;" class="rotate"> <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span> <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span> </div> Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

解决方案

You may try to use writing-mode .

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

codepen.io/gc-nomade/pen/rGJGzQ?editors=1100

.rotate { writing-mode:vertical-rl; transform:scale(-1); width:50px; margin-right:50px; } body { display:flex; align-items:flex-end; }

<div style="display:inline-block; position:relative;" class="rotate"> <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span> <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span> </div> Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

or transform:rotate(-90deg) (which was your first choice), but with a pseudo to reset height according to text-length. (this requires to use rgba() colors and set both line of text in a single container. codepen.io/gc-nomade/pen/RLQLJG?editors=1100

.rotate { width:110px; } .rotate>span { display:inline-block; transform:rotate(-90deg) } .rotate > span:before { content:''; padding-top:100%; float:left; } body { display:flex; align-items:flex-end; justify-content:flex-start; }

<div style="display:inline-block; position:relative;" class="rotate"> <span style=" font-size: 55px;color: rgba(0,0,0,0.15);white-space: nowrap;">BACKGROUND<br/> <span style="display:block;font-size: 45px;color: #222222;text-align:center;">TITLE</span></span> </div> Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

Both technics here, requires to set a width to the rotating text container and are build from a flex container. It should work in IE,FF,Chrome. (display:table/table-cell can be another display option for older browser)