当文本超过div限制时，div断线的行和文本中的三个div

Question

我在父div中使用white-space: nowrap;，这是将它的子div连在一起。

在子div中，我使用word-wrap: break-word;，它在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>

​

Answer 1

您可以使用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%29_。

编辑

正如WorkWe在注释中提到的那样，您可以尝试的另一个修复方法是从主父容器中删除white-space:nowrap; (如果它不是其他容器所必需的)。

您可以在这里看到一个小提琴示例：https://jsfiddle.net/tdc300up/4/

Answer 2

更新小提琴链接。正如shuvo所说，添加空白:正常的儿童div。

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

Answer 3

您应该尝试在child.As中保持正常的空白，您想要打破这条线..

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