Question

我在父div中使用white-space: nowrap;，这是一个连续的孩子div。

在儿童div中，我使用的word-wrap: break-word;在white-space:nowrap;内无效。

我的预期结果是连续所有div都达到了屏幕限制，但当div文本超过div宽度限制时，文本行中断到下一行。

＆＃13;

<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>

＆＃13;

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)

修改

正如WorkWe在评论中所提到的，您可以尝试的另一个修复是从主父容器中删除white-space:nowrap;（如果其他内容不需要它）。

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

Answer 2

更新了小提琴链接。如shuvo所说，添加白色空间：正常到childern div

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

Answer 3

你应该尝试使用白色空间在孩子身上保持正常。因为你想打破这条线..

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

Answer 4

删除div父代的错误代码：

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

要：

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

注意：您可以删除width="100%"，因为div阻止代码，宽度默认为100%。

重置white-space类的text-center是：

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

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

4 个答案: