white-space: nowrap;子divを続けて貼り付けている親divで使用しています。
のword-wrap: break-word;中で動作していない子divで使用していwhite-space:nowrap;ます。
私の期待する結果は、行のすべてのdivが画面の制限に達したとしても、divテキストがdiv幅の制限を超えると、テキストの行が次の行に分割されることです。
<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>を使用できます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/
（より良いサポートのおかげで、ここで追加のプレフィックスのすべてを必要としないことに注意してください-https：//css-tricks.com/almanac/properties/w/whitespace/#browser-supportを参照してください）
編集
WorkWeがコメントで述べているように、試すことができるもう1つの修正はwhite-space:nowrap;、メインの親コンテナーからを削除することです（他の何かに必要ない場合）。
ここでフィドルの例を見ることができます：https：//jsfiddle.net/tdc300up/4/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加