段組でword-wrapを効かせるようにした例

ここでは、displayプロパティに値「table」や「table-cell」を使うことで段組構成を作っています。このとき、英数字の長い羅列があると、何も対策をしなければword-wrapプロパティを使っていても段組は崩れてしまいます。ここでは、ある対策をしているために、word-wrapがちゃんと効果を発揮しています。
詳しい解説は、解説記事本文をご参照下さい。

MAIN COLUMN

この段には、横幅は指定していません。

LoremIpsumDolorSitAmet,ConsecteturAdipiscingElit,SedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua. UtEnimAdMinimVeniam,QuisNostrudExercitationUllamcoLaborisNisiUtAliquipExEaCommodoConsequat. DuisAuteIrureDolorInReprehenderitInVoluptateVelitEsseCillumDoloreEuFugiatNullaPariatur. ExcepteurSintOccaecatCupidatatNonProident, SuntInCulpaQuiOfficiaDeseruntMollitAnimIdEstLaborum.

http://www.example.com/pangram/QuickBrownFox/TheQuickBrownFoxJumpsOverTheLazyDog/HowRazorbackjumpingFrogsCanLevelSixPiquedGymnasts!/

SUB COLUMN

この段は、横幅が300pxになるよう記述してあります。

※横幅の広いウインドウで見ている場合は、ブラウザのウインドウ幅を狭めてみて下さい。段組は崩れません。