变大的元素：在不移动周围元素的情况下激活

Question

我有一个由多个span元素组成的句子：

<span class="sentence">
    <span>First</span>
    <span>second</span>
    <span>third.</span>
</span>

点击span后:active，我希望它有一个增加的字体，但不会水平移动它周围的元素。

空闲

第二个字：活跃

我不想要任何Javascript（计算元素的:active宽度，或者像这样的一些黑客），只有CSS。一种解决方案是默认添加右/左填充，并在单词:active时禁止它，但它不适用于所有字长：http://jsfiddle.net/Ampwt/1/

我知道如何实现这个目标吗？

Answer 1

为您的跨度应用宽度和高度。请参阅样本css。

.sentence span {
    display:inline-block;
    vertical-align:middle;
    font-size:1.5em;
    width: 170px;
    height:30px;
}
.sentence span:active {
    font-size:2em;
}

Answer 2

使用transform: scale()：http://jsfiddle.net/Ampwt/2/。

<span class="sentence">
    <span>First</span>
    <span>second</span>
    <span>third.</span>
</span>

<br />

<span class="sentence">
    <span>First</span>
    <span>very long word</span>
    <span>third.</span>
</span>

CSS：

.sentence span {
    display:inline-block;
    vertical-align:middle;
    font-size:1.5em;
    padding:0 1em;
}
.sentence span:active {
    -webkit-transform: scale(2);
    transform: scale(2);
}