Gli elementi di blocco occupano tutta la larghezza quando il testo si estende su due righe

Question

Sono fondamentalmente solo curioso di questo perché lo vedo sempre e nessuno con cui ho parlato sembra sapere se c'è una soluzione.

Di solito quando ci si imbatte in questo per un pulsante dall'aspetto elegante con uno sfondo su di esso ed è blocco di visualizzazione o blocco in linea.

Il problema è questo: diciamo che hai un pulsante all'interno di un div che ha una larghezza specifica, diciamo 160px, e hai un blocco di visualizzazione o blocco inline all'interno, se il testo all'interno del cant è tutto in una riga si attesta a due come ti aspetteresti ma ora che è su due righe non è più necessario occupare tutta la larghezza del div ma lo fa! Non sono davvero così sorpreso che ciò accada, ma mi stavo chiedendo se qualcuno fosse a conoscenza di un css o di una soluzione JS che risolva questo problema?

Codice:

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: block;">Test with a longwrappingword</a> 
</div> 

JSFiddle here

Answer 1

È questo che vuoi dire? Ho aggiunto un attributo width all'ancora.

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: block; width: 100px;">Test with a longwrappingword</a> 
</div> 

Answer 2

È questo che intendi?

http://jsfiddle.net/UPxZm/

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a id="block" href="#" style="background: red; display: block;">Test with a longwrappingword</a> 
</div> 

<script> 
var $block = $('#block'); 
var orig = $block.html(); 
var index = orig.lastIndexOf(' ') || -1; 
var longword = orig.substring(index + 1, orig.length); 

$block.html(orig + longword); 
var wanted_width = $block[0].scrollWidth/2; 
$block.html(orig); 
$block.width(wanted_width); 
</script> 

Answer 3

Does this lavoro per voi?

<div style="width: 160px; padding: 10px; background: blue;"> 
    <a href="#" style="background: red; display: table; width: 1%">Test with a longwrappingword</a> 
</div> 
<span style="padding-left:130px">^ Where the element COULD end if it wanted to</span>