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

我有一个特定风格的问题.我在div中使用CSS变换旋转字符串“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>

解决方法:

我通过将标记类更改为这样来读取它.
请注意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;

标签：javascript,css,css-transforms
来源： https://codeday.me/bug/20190608/1196851.html