正确定位旋转文本(带字母间距/ html5 / CSS)(Correctly position rotated text (with letter spacing / html5 / CSS))
我已经阅读并尝试了关于Stackoverflow上关于这个主题的大部分答案，但似乎没有一个对我有用(旋转是，正确定位没有)。 我的问题：
旋转文字-90度
正确定位-90度文本如下图所示(最终结果)。
代码应该适用于响应式设计(％)
我在JSFiddle中添加了完整的代码(包括我在内容上方的标题)。 我添加了灰色标题以澄清在图像/标题/文本开始之前有上面的内容： 链接到JSFiddle代码
你如何(1)旋转文本，更重要的是(2)如何定位旋转文本类似于最终结果：
HTML代码(参见JSFiddle)：
ABOUT
Viris tibique scaevola mea ut, soluta forensibus suscipiantur et usu, his at munere fabellas. Cu harum quaestio cum, mei an quodsi evertitur adipiscing. Discere inermis dissentias ne mel. At eos possit elaboraret, sea ea vitae lobortis.
Id doming consulatu usu. Suas quot mei ut, ne habeo liberavisse his. Nec aeterno nostrud disputando ad, per in facete alienum. Cu his debitis inimicus facilisis.
In audiam tractatos per. Eu est zril reprehendunt. Probo appetere consetetur eam an. Augue ignota sit ex. Ex sanctus nominavi vix, nam ne mandamus intellegat. Vivendum principes eam no, qui ei pericula abhorreant. Mundi mediocrem scribentur duo ne, graeco theophrastus id his.
提前致谢。
I have read and tried most of the answers given about this topic on Stackoverflow, but none seem to work for me (rotating yes, position it correctly no). My problem:
Rotate the text -90 degrees
Position the -90 degrees text correctly as the picture below (End Result).
Code should work for responsive design (%)
I added the complete code in JSFiddle (including my header above the content). I added the grey header to clarify that there is content above before the image/title/text begins: Link to JSFiddle code
How do you (1) rotate the text and more importantly (2) how do you position the rotated text similar to the end result:
HTML code (see JSFiddle):
ABOUT
Viris tibique scaevola mea ut, soluta forensibus suscipiantur et usu, his at munere fabellas. Cu harum quaestio cum, mei an quodsi evertitur adipiscing. Discere inermis dissentias ne mel. At eos possit elaboraret, sea ea vitae lobortis.
Id doming consulatu usu. Suas quot mei ut, ne habeo liberavisse his. Nec aeterno nostrud disputando ad, per in facete alienum. Cu his debitis inimicus facilisis.
In audiam tractatos per. Eu est zril reprehendunt. Probo appetere consetetur eam an. Augue ignota sit ex. Ex sanctus nominavi vix, nam ne mandamus intellegat. Vivendum principes eam no, qui ei pericula abhorreant. Mundi mediocrem scribentur duo ne, graeco theophrastus id his.
Thanks in advance.
原文：https://stackoverflow.com/questions/36959575
更新时间：2019-09-25 17:33
最满意答案
使用css旋转
.about-ttl {
width: 20%;
float: left;
transform: rotate(-90deg);
margin-top:100px;
}
use the css rotate
.about-ttl {
width: 20%;
float: left;
transform: rotate(-90deg);
margin-top:100px;
}
相关问答
您可以将元素设置为-1.2em的右边距，这将抵消字母间距。 例如 .menu-header-selector {
display:block;
letter-spacing:1.2em;
margin-right:-1.2em;
text-align:right;
}
为了回答你关于伪选择器的问题，就我所知，没有每个字符的伪选择器。 (编辑：从头开始，有Jonas G. Drange指出的:First-Letter选择器)。 编辑：你可以在这里找到一个基本的示例： http :
...
使用css旋转 .about-ttl {
width: 20%;
float: left;
transform: rotate(-90deg);
margin-top:100px;
}
https://jsfiddle.net/md4zpxwn/3/ use the css rotate .about-ttl {
width: 20%;
float: left;
transform: rotate(-90deg);
margin-top:100px;
}
https://jsfiddle.
...
我在图像和文本上使用了Z索引，然后在顶部添加了0度的旋转来实现此目的。 我还将文本和图像放在同一个div中，并将该div赋予旋转类。 这是一个小提琴https://fiddle.jshell.net/z8p1zk6c/
body {
background-color:black;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
}
h2 {
color:
...
不，Html + CSS + JavaScript过去被称为DHTML。 https://en.wikipedia.org/wiki/Dynamic_HTML HTML5本身就是一种标记语言。 https://en.wikipedia.org/wiki/HTML5 No, Html + CSS + JavaScript used to be called DHTML. https://en.wikipedia.org/wiki/Dynamic_HTML HTML5 itself is a mark
...
对于初学者，你没有正确评论我们的CSS，这样做 /*THE SCROLL BG*/
For starters you are not commenting out our css correctly, do this /*THE SCROLL BG*/
我宁愿避免position: absolute; 对于作为页面内容一部分的元素，我使用float来代替。 我还设置了transform-origin因为找出相对于固定点而不是对象边界框中间的位置通常更容易： .rotateText {
float: left;
transform-origin: top left;
-webkit-transform: rotate(-90deg) translateX(-100%);
transform: rotate(-90de
...
你在正确的轨道上，你只需要添加单位。 这听起来像72是默认是正常的72倍 - 这是一个巨大的空间。 疯狂猜测，你可能想尝试字母间距的百分比，以及行间距的像素，如下所示： .myClass {
font-family: 'Arial', sans-serif;
letter-spacing: 1.72;
line-height: 21px;
}
在我看来，使用除%和px之外的任何值都会导致不可感知的值。 但是，如果这是不正确的，那就和单位玩，甚至是价值观。 你有没有看到网页
...
你忘记了响应式视图了
you forgot for responsive view as
你的代码肯定需要工作。 这是我的优化和评论的小提琴： http ： //jsfiddle.net/QJcsB/ 。 代码中仍然有冗余，我会让你解决这些问题。 更新的HTML：
2363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
