* word-wrap:break-word*和/或*溢出x:滚动*在flex项目中不起作用 - *word-wrap: break-word* and/or *overflow-x: scroll* not working inside flex item 小贝子编程网

我正在尝试在.log_area中制作段落以打破单词而不是溢出整个页面，以避免水平 page> page scroll(如果需要，如果需要，接受.log_area中的水平滚动(。

语句" word-wrap：break-word;'不管用。还有" Overflow-X：scroll;"也无法正常工作。

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

您正在使用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>

您可以添加溢出：隐藏。

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

* word-wrap:break-word和/或溢出x:滚动*在flex项目中不起作用

相关内容

最新更新

热门标签：