CSS shrink-to-fit boxes

CSS2.1 10.3.5 shrink-to-fit width computation

float (left, right)

OK: Moz, Op, Saf, IE

Few words: Lorem ipsum
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words: Maecenas rhoncus magna vel libero. Ut rutrum velit a risus. Fusce vulputate leo at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.
.

display: inline-block

OK: IE, Op7+, Saf, Moz1.9+; KO: Moz1.8-

Few words: Lorem ipsum
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words: Maecenas rhoncus magna vel libero. Ut rutrum velit a risus. Fusce vulputate leo at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.
Soldati  Giuseppe Ungaretti  Si sta come
d'autunno
sugli alberi
le foglie.

display: table-cell

OK: Moz, Op, Saf, IE8; KO: IE7-

Few words: Lorem ipsum
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words: Maecenas rhoncus magna vel libero. Ut rutrum velit a risus. Fusce vulputate leo at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.

display: table

OK: Moz, Op, Saf, IE8; KO: IE7-

Few words: Lorem ipsum
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words: Maecenas rhoncus magna vel libero. Ut rutrum velit a risus. Fusce vulputate leo at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.

display: inline-table

OK: Op, Saf, Moz1.9+, IE8; KO: IE7-, Moz1.9-

Few words: Lorem ipsum
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words: Maecenas rhoncus magna vel libero. Ut rutrum velit a risus. Fusce vulputate leo at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.

position: absolute

OK: Moz, Op, Saf, IE

Few words: Lorem ipsum
 
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
 
Many words: Maecenas rhoncus magna vel libero. Ut rutrum velit a risus. Fusce vulputate leo at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.
 

Notes:

CSS tests home