Question

我创建了一个包含旋转文本的CSS三角形。该文本将根据不同的市场和语言而变化，因此将具有不同的长度。我需要它始终居中，我不能让它工作，特别是当文本分成两行时。

我试过旋转父元素而不是文本元素，我一直在测试transform-origin属性和边距，但仍然没有运气。

谢谢！

我的HTML：

<div class="container">                      
    <div class="badge">                      
        <div class="badge-text">
            Test 
        </div>
    </div>
</div>

我的CSS：

 .container {
    position: relative;
}

.badge {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 100px 100px 0;
    border-color: transparent #2864cb transparent transparent;
    position: absolute;
    right: 0;
    top: 0;
    color: white;
}

.badge-text {
    position: absolute;
    margin: 25px;
    text-align: center;
    text-transform: uppercase;
    width: 85px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

Answer 1

由于文本的长度可变，我建议你添加以下2个css规则，

.badge-text {
..

    overflow: hidden;
    text-overflow: ellipsis;

..
}

并在元素的title属性中添加完整的文本。

这将确保您覆盖最糟糕的情况，因为IMO您永远无法始终将文本居中对齐可变长度。

JS Fiddle:

MDN: text-overflow

Answer 2

我认为最好的解决方案是将它放在尽可能远的底部（因此它适合大字），然后使其从一个边缘延伸到另一个边缘，这样文本总是居中，尽管它的大小字。试试这个（你可以删除边框）; http://jsfiddle.net/3NuF6/18/

.badge-text {
   border: 1px solid;
left: -15px;
margin: 25px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 9px;
transform: rotate(45deg);
width: 95px;

}

更新：如果你想要2个单词，那么空间要小得多，所以试试这样的东西或者我会建议更大的三角形http://jsfiddle.net/3NuF6/20/

.badge-text {
border: 1px solid;
left: 3px;
margin: 25px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -5px;
transform: rotate(45deg);
width: 75px;

}

居中对齐旋转三角形中的文本

2 个答案: