<p>Is there a CSS editor which automatically expands one-line declarations as multi-line declarations on focus ? To clarify my thought, see example below:</p>

<p>Original CSS:</p>

<pre><code>div#main { color: orange; margin: 1em 0; border: 1px solid black; }
</code></pre>

<p>But when focusing on it, editor automatically expands it to:</p>

<pre><code>div#main { 
  color: orange; 
  margin: 1em 0; 
  border: 1px solid black; 
}
</code></pre>

<p>And when it looses focus, editor again it automatically compresses it to one-line declaration.</p>

<p>Thanks.</p>

Sorry. I don't know of any IDEs that explicitly do that.
But, there are quite a few external options:
CSSTidy
(download)
Clean CSS
(in-browser)
CSS Optimiser
(in-browser)
others...
(Google Search)