html - 水平挤压文本(使 内的字体更窄但高度相同)

Question

我在 p/p 里面有一些文字。

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

我希望文本随包含的 div 一起缩小，但不是按比例缩小。

我希望效果看起来像是有东西从侧面进入，压扁 p...就像压在一些熔化的塑料上一样。

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

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

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

是否有一个简单的 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>