shrink-to-fit boxes & text-align
Align left
float: left
Few words: Lorem ipsum
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
float: right
Few words: Lorem ipsum
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-table
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-block
A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit.
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
table
| A_long_unbreakable_word:_LoremIpsumDolorSitAmetConsectetuerAdipiscingElit. |
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
|
Align right
float: left, text-align: right
Few words: Lorem ipsum
Many words, with some <br> inside and text-align:right:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
float: right, text-align: right
Few words: Lorem ipsum
Many words, with some <br> inside and text-align:right:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-table, text-align: right
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-block, text-align: right
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
table, text-align: right
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
|
Align center
float: left, text-align: center
Few words: Lorem ipsum
Many words, with some <br> inside and text-align:right:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
float: right, text-align: center
Few words: Lorem ipsum
Many words, with some <br> inside and text-align:right:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-table, text-align: center
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-block, text-align: center
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
table, text-align: center
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
|
with 1px shrink (and align center, lost) Useful for IE5/Mac
float: left, text-align: center
Few words: Lorem ipsum
Many words, with some <br> inside and text-align:right:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
float: right, text-align: center
Few words: Lorem ipsum
Many words, with some <br> inside and text-align:right:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-table, text-align: center
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
display: inline-block, text-align: center
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
table, text-align: center
Many words, with some <br> inside:¶
Maecenas rhoncus magna vel libero.¶
Ut rutrum velit a risus. Fusce vulputate leo at magna.¶
Donec nunc sem, varius sed, dignissim quis, rhoncus sit amet, augue.¶
|
CSS tests home