Elementy blokowe zajmują całą szerokość, gdy tekst zawija się do dwóch linii.

Question

Jestem po prostu ciekawy tego, ponieważ widzę go cały czas i nikt, z kim rozmawiałem nie wydaje się wiedzieć, czy istnieje rozwiązanie.

Zwykle, gdy natknę się na to, szukam fantazyjnego przycisku z tłem i blokiem wyświetlacza lub wbudowanym blokiem.

Kwestia jest następująca: powiedzmy, że masz przycisk wewnątrz elementu div, który ma określoną szerokość, powiedzmy 160px, i masz blok wyświetlacza lub wbudowany blok wewnątrz, jeśli tekst wewnątrz przechyłki mieści się w jednej linii owija się do dwóch, jak można by się spodziewać, ale teraz, gdy jest na dwóch liniach, nie musi już zajmować całej szerokości elementu div, ale robi to! Nie jestem tak zaskoczony, że tak się dzieje, ale zastanawiałem się, czy ktoś wie o rozwiązaniu css lub nawet JS, które to naprawi?

Kod:

<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

Czy to co masz na myśli? Dodałem atrybut width do zakotwiczenia.

<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

Czy to masz na myśli?

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

Czy this pracy dla Ciebie?

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