ブロックの要素は、テキストが2行に折り返されたときに全幅になります。

Question

私は基本的にちょうど興味があります。私はそれを常に見ているので、解決策があるかどうかは分かりません。

通常、私はこの上に背景があるファンシーな探しのボタンのために来て、表示ブロックまたはインラインブロックです。

問題はこれです：特定の幅を持つdiv内にボタンがあるとしたら、160pxと言うことができ、キャンバス内のテキストがすべて1行に収まる場合は、内部に表示ブロックまたはインラインブロックがありますそれはあなたが期待するように2つにラップするが、それはもはや実際にはdivの全幅を取る必要はありませんが、それは2つの行にあるが、それはありません！私は本当にこれが起こって驚いていないが、誰かがこれを修正するCSSやJSソリューションを知っていた場合は私は思っていた？

コード：

<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

はあなたが何を意味するか、このですか？アンカーにwidth属性を追加しました。

<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

この意味は？

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

あなたのためのthis仕事をしていますか？

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