*word-wrap: break-word* 和/或 *overflow-x: scroll* 在弹性项目中不起作用答案

【问题标题】：*word-wrap: break-word* and/or *overflow-x: scroll* not working inside flex item*word-wrap: break-word* 和/或 *overflow-x: scroll* 在弹性项目中不起作用
【发布时间】：2018-09-04 18:57:24
【问题描述】：

我正在尝试使 .log_area 中的段落中断单词而不溢出整个页面，以避免水平 page 滚动（如果需要，可以接受 .log_area 中的水平滚动)。

语句'word-wrap: break-word;'不管用。还有“溢出-x：滚动；”也不行。

当我禁用 flex 容器时，它可以工作。但我需要 flex 容器。

我怎样才能做到这一点？

<html>
<head>
<style>

.content {
    display: flex;
    flex-flow: row wrap;
}

.flexitem1 {
    background-color: #DDF;
    flex: 1 1 auto;
}

.flexitem2 {
    flex: 1 1 auto;
}

.log_area {
    height: 250px;
    background-color: #CFC;
    overflow-y: scroll;
    overflow-x: scroll;
}

.log_item {
    word-wrap: break-word;
}

</style>

</head>

<body>

<div class='content'>
    <div class='flexitem1'>
        <p>Flex item div 1. It's ok.</p>
    </div>
    <div class='flexitem2'>
        <div class="log_area">
        <p class="log_item">First paragraph.</p>
        <p class="log_item">Second paragraph: it's so loooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggg</p>
        </div>
    </div>
</div>

</body>
</html>

【问题讨论】：

当溢出-x 为自动或滚动时，我不希望单词中断，我希望 div 扩展然后滚动 - 否则 1 它永远不会滚动或 2 单词永远不会中断- 我不明白你期望他们如何一起工作
在 .flexItem2 css 上添加 width: 100%;

标签： html css flexbox overflow word-wrap

【解决方案1】：

你可以添加溢出：隐藏。

<html>
<head>
<style>

.content {
    display: flex;
    flex-flow: row wrap;
}

.flexitem1 {
    background-color: #DDF;
    flex: 1 1 auto;
}

.flexitem2 {
    flex: 1 1 auto;
    overflow: hidden;
}

.log_area {
    height: 250px;
    background-color: #CFC;
    overflow-y: scroll;
    overflow-x: scroll;
}

.log_item {
    word-wrap: break-word;
}

</style>

</head>

<body>

<div class='content'>
    <div class='flexitem1'>
        <p>Flex item div 1. It's ok.</p>
    </div>
    <div class='flexitem2'>
        <div class="log_area">
        <p class="log_item">First paragraph.</p>
        <p class="log_item">Second paragraph: it's so loooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggg</p>
        </div>
    </div>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

您正在使用word-wrap: break-word！这是一个很长的单词，所以你应该使用word-break: break-all，如果你不想让单词中断，然后使用word-break: keep-all，如果你不想让一些空格中断，它会打破单词之间的空格使用&nbsp; .

我在下面的代码中添加了这两个示例。

尝试将word-break: break-all 更改为keep-all。

.content {
    display: flex;
    flex-flow: row wrap;
}

.flexitem1 {
    background-color: #DDF;
    flex: 1 1 auto;
}

.flexitem2 {
    flex: 1 1 auto;
}

.log_area {
    height: 250px;
    background-color: #CFC;
    overflow-y: scroll;
    overflow-x: scroll;
}

.log_item {
    word-break: keep-all;
}

.long_word {
  word-break: break-all;
}

<div class='content'>
    <div class='flexitem1'>
        <p>Flex item div 1. It's ok.</p>
    </div>
    <div class='flexitem2'>
        <div class="log_area">
        <p class="log_item">First paragraph.</p>
        <p class="log_item">Second paragraph: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          
          <p class="long_word">Second paragraph: This is longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
        </div>
    </div>
</div>

【讨论】：