Question

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

语句'自动换行：break-word;'不管用。还有'overflow-x：scroll;'也不行。

当我禁用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>

Answer 1

您可以添加overflow：hidden。

＆＃13;

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

＆＃13;

Answer 2

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

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

尝试将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>

自动换行：break-word 和/或* overflow-x：滚动*在flex项目中不起作用

2 个答案:

*自动换行：break-word *和/或* overflow-x：滚动*在flex项目中不起作用

2 个答案:

自动换行：break-word 和/或* overflow-x：滚动*在flex项目中不起作用