我正在尝试实现一些简单但有点复杂的CSS,我想旋转一些需要与顶部边框顶部对齐的标签,沿着以下线宽度相等:
有一些问题会导致相互冲突的问题(解决一个问题会破坏另一个问题):
- 文本的宽度会变化/动态
- 标签需要保持相同的宽度 - 32px(不更宽)
- 它们需要沿着“顶部”对齐,沿着其他元素 float
参见jsbin :
html:
<div class="label">
<span class="label-text">Hello</span>
</div>
CSS:
.label {
border-top: 10px solid black;
width: 120px;
float: left;
margin-right: 12px;
}
.label-text {
display: block;
transform: rotate(-90deg);
text-align: right;
margin-top: 64px;
}
结果是:
这很接近,但我无法在不影响其中文本的情况下使栏变窄。一旦我开始调整宽度,旋转似乎就会引起各种各样的问题。
最佳答案
这是可能的,但它涉及定位和了解一些高度。
* {
box-sizing: border-box;
}
body {
text-align: center;
}
.label {
width: 32px;
margin: 1em;
height: 150px;
/* you need to know the max height or you get overflow */
background: rgba(255, 0, 0, .5);
white-space: nowrap;
display: inline-block;
position: relative;
}
.label-text {
border: 1px solid green;
border-right: 10px solid black;
position: absolute;
top: 0;
left: 0;
height: 32px;
line-height: 32px;
padding: 0 1em;
transform-origin: top left;
transform: rotate(-90deg) translateX(-100%);
}
<div class="label">
<span class="label-text">I'm short and OK</span>
</div>
<div class="label">
<span class="label-text">I'm waaay too long to be contained in this area.</span>
</div>
关于html - CSS 变换/旋转动态宽度的文本,上方有线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35588274/