html - Outer span width of bigger inner span? -

i want make outer span width of longer inner span. c should hidden until hover make b hidden. if @ demo , click button you'll see once b longer c breaks. possibility server side check string length , choose should left side breaks depending on string

lllllllll <-- 9 chars
wwww <-- 4 chars wider

source of demo

html

test <span class="a">     <span class="b">bbbb</span>     <span class="c">ccccccccc</span> </span> test <button class="btn">make b bigger</button> 

css:

.a {     border: black dotted 1px; } .b {     position:absolute } .c {     visibility:hidden } .a:hover .b {     visibility:hidden } .a:hover .c {     visibility:visible } 

js:

$(".btn").click(function () {     $(".b").html("long word here"); }); 

my previous solution mistaken. 1 better:

http://jsfiddle.net/jzjwm/10/

the disadvantage have give b , c fixed height. can improved can work on yourself.