Não consigo descobrir como fazer isso com CSS. Se eu apenas usar um<br> tag, ele funciona perfeitamente, mas estou tentando evitar fazer isso por razões óbvia

Basicamente, eu só quero o.feature_desc span para iniciar uma nova linha, mas:

Se eu o fizer um elemento inline, ele não terá uma quebra de linhSe eu fizer dele um elemento de bloco, ele será expandido para caber em toda a linha, colocando cada um desses ícones em sua própria linha e desperdiçando muito espaço na tela (cada.feature_wrapper terá um tamanho ligeiramente diferente, mas nenhum será tão largo quanto a tela inteira.)

Exemplo de código: funciona, mas usa umbr tag:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

Quero estilizar isso com CSS para obter o mesmo resultado:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

Alguma ideia? Ou vou fazer isso da maneira errada?