变换改变宽度

【问题标题】：Transform changes width变换改变宽度
【发布时间】：2017-07-30 20:14:10
【问题描述】：

我的跨度为 position: absolute 和 width: 100%，我想为它设置动画，所以我在悬停时添加了 transform: scale(1.2) 但它改变了宽度。如何预防？

.caption
{
    position: absolute;
    left: 0;
    top: 50%;
    text-align: center;
    color: #000;
    width: 100%;
}
 
.caption span.border
{
    color: #fff;
    font-size: 50px;
    letter-spacing: 10px;
    transition: transform .5s ease-in-out;
    display: block;
}
 
.caption span.border:hover
{
    cursor: pointer;
    transform: scale(1.2);
}

【问题讨论】：

你能在你的演示中添加一些 HTML 吗？

标签： html css css-position

【解决方案1】：

由于跨度有display: block，它的宽度是标题的100%。当 span 缩放时，宽度变为 120%。

您可以尝试以下几种方法，具体取决于此元素的上下文。

您可以将跨度更改为 display: inline-block，这样它就没有 100% 的宽度，但仍然可以缩放。
您可以提供标题overflow: hidden，这样即使边框溢出，也不会导致奇怪的尺寸问题。不过，您需要确保标题块中有足够的垂直空间。

Here is a jsFiddle 您可以在其中玩转每个选项并找到最适合的选项。

【讨论】：

非常感谢！