title: Squash text horizontally (make the font inside <p> narrower but same height)
body: <p>I have some text inside p/p.</p>
  
  <p>as the mouse hovers over the p, I make the p's width slightly less ( with transitions).</p>
  
  <p>I want the text to shrink along with the containing div, but not proportionally.</p>
  
  <p>I want the effect to look like something is coming in from the side, to squash the p...like a press on some molten plastic.</p>
  
  <p>So, what would happen in real life is the stuff inside gets squashed - dimension in one direction decreases and increases in the other dimension....I want the text to shrink in one direction and stay the same in the offer, though.</p>
  
  <p>I want the width of each letter to decreases and the height to remain the same.</p>
  
  <p>changing font size does not achieve this - font gets smaller in both dimensions.</p>
  
  <p>Is there a simple CSS trick which I can put in the same CSS transition as the width of the div.</p>
  
  <pre><code>&lt;p&gt;HELLO HELLO HELLO wejdf wekf ewufkgewlf ewtfgwef weulf &lt;/p&gt;
  
  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 
  }
  </code></pre>
  
  <p>Thanks</p>