使用变换旋转和更改文本来调整宽度 div答案

【问题标题】：Adapt width div with transform rotate and change text使用变换旋转和更改文本来调整宽度 div
【发布时间】：2017-06-09 17:08:45
【问题描述】：

我对特定样式有疑问。我在一个带有 CSS 变换旋转的 div 中有一个字符串“Historic”，位于同级 div 的特定部分。如果我将字符串更改为“Historique”（对于 i18n），则 div 会移动。

我希望当字符串改变时 div 保持在同一个地方。谢谢你的回答。

#main {
	margin: 50px;
	position: relative;
	width: 300px;
	background: #eee;
	border: thin solid #bbb;
}

#tag {
	position: absolute;
    left: -36px;
    padding: 5px;
    font-size: 9px;
    transform: rotate(-90deg);
    background: red;
    color: white;
    bottom: 15px;
    text-transform: uppercase;
    max-height: 20px;
}

.content {
	display: flex;
	position: relative;
	padding: 20px;
}

<div id="main">
	<div id="tag">Historic</div>
	<div class="content">a</div>
	<div class="content">b</div>
	<div class="content">c</div>
</div>

【问题讨论】：

标签： javascript css css-transforms

【解决方案1】：

我通过将标记类更改为像这样读取来让它工作。注意 transform-origin 选项。

transform-origin: left top 0;
position: absolute;
left: -21px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: -20px;
text-transform: uppercase;
max-height: 20px;

【讨论】：