テキストがdivの制限を超えたときに3つのdivとテキストの区切り線

Question

私はwhite-space: nowrap;を親divに貼り付けています。

子どものdivの私は、white-space:nowrap;の中で働いていないword-wrap: break-word;を使用しています。

私の予想どおりの結果では、行のすべてのdivも画面の制限に達しますが、divのテキストがdivの幅を超えるとテキストの改行が次の行に制限されます。

Fiddle Link

<div overflow-x:auto; width="100%" style="white-space: nowrap"> 
 
    <div style="display: inline-block; width: 200px; border-right: solid #778899"> 
 

 
    <div style="padding: 0 10px; background-color: white; height: 130px; overflow-x: hidden;"> 
 
     div1 
 
     <p class="text-center" style="word-wrap: break-word;"> 
 
     datasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 
 

 
     </p> 
 
    </div> 
 
    </div> 
 
    <div style="width:200px; display: inline-block; border-right: solid #778899;"> 
 

 
    <div class="pd-5" style="background-color: white; height: 130px; overflow-x: hidden;"> 
 

 
     div2 
 
     <p class="text-center" style="word-wrap: break-word;"> 
 
     ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssss 
 
     </p> 
 

 
    </div> 
 
    </div> 
 
    <div style="width: 200px; display: inline-block; border-right: solid #778899;"> 
 

 
    <div class="pd-5" style="background-color: white; height: 130px; overflow-x: hidden;"> 
 

 
     div3 
 
     <p class="text-center" style="word-wrap: break-word;"> 
 
     sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 
 
     </p> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

..あなたがラインを壊したくchild.Asに正常であるように、ホワイトスペースを試してみてくださいwhite-space:pre-wrap;。

ここでここで更新フィドルhttps://jsfiddle.net/tdc300up/1/

だが、私はそれを解決するために使用されるCSSコードです：また

div > div > div { 
    white-space: pre-wrap;  /* CSS3 */ 
    white-space: -moz-pre-wrap; /* Firefox */  
    white-space: -pre-wrap;  /* Opera <7 */ 
    white-space: -o-pre-wrap; /* Opera 7 */  
    word-wrap: break-word;  /* IE */ 
} 

、あなたも、ここでこのフィドルでショーとして

div { 
    white-space: normal; 
} 

を使用することができます。 https://jsfiddle.net/tdc300up/3/

（あなたがここで追加の事前修正の全てを必要としないことに注意して、より良いサポートに感謝を取る - コメントでWorkWeで述べたようにhttps://css-tricks.com/almanac/properties/w/whitespace/#browser-support)

編集に

を参照してください、あなたは試みることができる別の修正をメインの親コンテナからwhite-space:nowrap;を削除しています（別のものに必要ない場合）。

あなたはここでは例のフィドルを見ることができます：https://jsfiddle.net/tdc300up/4/

Answer 2

あなたはあなたが使用することができます

<p class="text-center" style="word-wrap: break-word;white-space: normal;"> 
    sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 
     </p> 

Answer 3

をdiv親の間違ったコードを削除します。

<div overflow-x:auto; width="100%" style="white-space: nowrap"> 
// Some thing 
</div> 

へ：

<div width="100%" style="white-space: nowrap"> 
// Some thing 
</div> 

注：divブロックするので、width="100%"を削除することができますがタグの幅のデフォルトは100%です。

、リセットwhite-spaceためtext-centerクラスは次のとおりです。

.text-center { 
    white-space: normal; 
} 

Answer 4

更新フィドルリンク。shuvoによって言われているように、空白を追加する：普通のdivに

`https://jsfiddle.net/gopal280377/tdc300up/2/`