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>

水平压制文本（使<p>中的字体更窄但高度相同）</p>

1 个答案: