div {border: 1px solid black; background: white; margin-top: .2em;}
div.t0 {}
This is a long sentence to test wrapping within the division.
div.t0 {}
This is a long sentence to test wrapping within the division. More
of the long sentence to test wrapping within the division, etc., etc.
div.t6 {width: fit-content;}
This is a long sentence to test wrapping within the division.
div.t6 {width: fit-content;}
This is a short sentence.
div.t6 {width: fit-content;}
This is a long sentence to test wrapping within the division. More
of the long sentence to test wrapping within the division, etc., etc.
div.t1 {margin: .2em 3em; width: 10em;}
This is a long sentence to test wrapping within the division.
div.t3 {margin: auto 10%; width: 10em;}
This is a long sentence to test wrapping within the division.
div.t4 {margin: auto 30%; width: 10em;}
This is a long sentence to test wrapping within the division.
div.t9 {margin: auto 60%; width: 10em;}
This is a long sentence to test wrapping within the division.
Various Ways To Center
(all inherit "margin-top: .2em" from the unqualified div)
div.t2 {margin: auto; width: 10em;}
This is a long sentence to test wrapping within the division.
div.t5 {margin: auto 45%; width: 10%;}
This is a long sentence to test wrapping within the division.
div.t9 {margin: auto; width: 10%;}
This is a long sentence to test wrapping within the division.
div.t8 {margin: auto; width: 30%;}
This is a long sentence to test wrapping within the division.
div.t7 {margin: auto; width: fit-content;}
This is a short sentence.
div.t7 {margin: auto; width: fit-content;}
This is a long sentence to test wrapping within the division.
div.t7 {margin: auto; width: fit-content;}
This is a long sentence to test wrapping within the division. More
of the long sentence to test wrapping within the division, etc., etc.
You can also use width: max-content, width: min-content, and width: auto to
handle various wrapping situations.
div.w1 {width: min-content;} width = width of longest word
This is a short sentence.
div.w2 {width: max-content;} width = width of unwrapped content
This is a long sentence to test wrapping within the division. More
of the long sentence to test wrapping within the division, etc., etc.
div.w3 {overflow: scroll;} width = width of container -- scrolling enabled
111111111111111111111111111111111111111111111111111111112222222222222222222222222233333333333344444444
div.w4 {overflow: hidden;} width = width of container -- hidden enabled
111111111111111111111111111111111111111111111111111111112222222222222222222222222233333333333344444444
div.w5 {overflow: clip} width = width of container -- clip enabled
111111111111111111111111111111111111111111111111111111112222222222222222222222222233333333333344444444
div.w6 {overflow: visible} width = width of container -- visible (default) enabled
111111111111111111111111111111111111111111111111111111112222222222222222222222222233333333333344444444