Blockelemente nehmen volle Breite, wenn Text auf zwei Zeilen umschließt

Question

Ich bin im Grunde nur neugierig, weil ich es die ganze Zeit sehe und niemand, mit dem ich gesprochen habe, scheint zu wissen, ob es eine Lösung gibt.

Normalerweise, wenn ich auf dieses für einen schick aussehenden Knopf mit einem Hintergrund darauf stoße und Block oder Inline-Block ist.

Das Problem ist das: sagen Sie haben eine Schaltfläche innerhalb einer div, die eine bestimmte Breite hat, sagen wir 160px, und Sie haben eine Anzeige Block oder Inline-Block innerhalb, wenn der Text innerhalb der Überhöhung alle in einer Zeile passen es wird auf zwei verteilt, wie Sie es erwarten würden, aber jetzt, da es in zwei Zeilen ist, muss es nicht mehr wirklich die volle Breite des div aufnehmen, aber es tut es! Ich bin nicht wirklich überrascht, dass dies passiert, aber ich frage mich, ob jemand wusste, eine CSS oder sogar JS-Lösung, die das behebt?

Code:

<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

Ist das, was Sie meinen? Ich habe dem Anker ein width-Attribut hinzugefügt.

<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

Ist das was du meinst?

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

Hat this Arbeit für Sie?

<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>