水平挤压文本(使内部字体<p>更窄但高度相同)

Question

我在p/p中有一些文本。

当鼠标悬停在p上时，我会使p的宽度稍微变小（带有过渡）。

我希望文本与包含的div一起收缩，但不要按比例收缩。

我希望效果看起来像是有什么东西从侧面进来，像挤压一些熔化的塑料一样。

所以，在现实生活中会发生的事情是，里面的东西被挤压了——一个方向的维度在另一个维度上减少和增加。。。。不过，我希望文本向一个方向收缩，并在报价中保持不变。

我希望每个字母的宽度减小，高度保持不变。

改变字体大小并不能实现这一点——字体在两个维度上都会变小。

有没有一个简单的CSS技巧，我可以把它放在与div宽度相同的CSS转换中

<p>HELLO HELLO HELLO wejdf wekf ewufkgewlf ewtfgwef weulf </p>
div{
width: 100px;
transition: width 0.5s;
}
p{
font-size:14px;
transition: font-size (or something) 0.5s;
}
div:hover{
width:700px;
}
div:hover p{
some css 
}

感谢

Answer 1

你可以这样做：

div {
    padding: 20px 20px;
    text-align: center;
    background: #0F0;
    display: inline-block;
}
p {
    font-size: 24px;
    letter-spacing: 4px;
    transition: letter-spacing 0.5s ease;
}
p:hover {
    letter-spacing: 0px;
}

<div><p>HELLO HELLO HELLO</p></div>

解决方案2:

div {
    padding: 20px 20px;
    text-align: center;
    background: #0F0;
    display: inline-block;
}
p {
    font-size: 24px;
    transition: word-spacing 0.5s ease;
}
p:hover {
    word-spacing: -4px;
}

<div><p>HELLO HELLO HELLO</p></div>