Question

所以我试图将三个div并排设置为三列。现在每个div的宽度都是溢出的，我想设置它以便内容（文本）在达到div的长度时进入新行。这是我的代码，这里还有一个链接图像以供澄清：https://flic.kr/p/22qgZUd

＆＃13;

.fd2{
    width: 1212px;
    height: 617px;
    background-color: #bebaba;
    position: absolute;
}
.motherbox div{
    display: flex;
}

#cp{
    font-family: 'Noto Serif', serif;
    font-size: 90px;
    color: #FFFFFF;
    padding: 7px;
    text-shadow: 2px 2px 4px #000000;
    text-align: right;
}
.one{
    display: inline;
    position: relative;
    font-family: 'Noto Serif', serif;
    font-size: 70px;
    color: #EA4335;
    padding: 7px;
    text-shadow: 2px 2px 4px #9A9A9A;
    width: 30%;
    float: left;

}
.two{
    position: relative;
    font-family: 'Noto Serif', serif;
    font-size: 70px;
    color: #4285F4;
    padding: 7px;
    text-shadow: 2px 2px 4px #9A9A9A;
    text-align: right;
    width: 30%;
    float: left;
}
.three{
    position: relative;
    font-family: 'Noto Serif', serif;
    font-size: 70px;
    color: #34A853;
    padding: 7px;
    text-shadow: 2px 2px 4px #000000;
    text-align: right;
    width: 30%;
    float: left;
}
div.clear{
    clear: both;
}

＆＃13;

<body>

<!-- particles.js container -->
<div id="particles-js"></div>
<!--<div id="survey"></div>-->

<div class="form-container" id="form" style="display: block;">
    <div class="fd2" style="display: block;">
        <p class="quick" id="surv">
            <h1 id="cp">Quick Survey</h1>
        </p>
        <div class="motherbox">
            <div class="one" id="first">
            <p>1:sssssssssssssssssssssssssssssssddddddddddd</p>
            </div>
            <div class="two" id="second">
            <p>2:dddddddddddddddddddddgggggggggggggggggggggg</p>
            </div>
            <div class="three" id="three">
            <p>3:fddggggggggggggggggggggggggggggggggggggggggg</p>
            </div>
            <br style="float: left;">
        </div>
    </div>
</div>
<div class="clear"></div>

＆＃13;

Answer 1

只需添加此css就可以了

div p{
   width: 100%;
   overflow-wrap: break-word;
}

＆＃13;

.fd2{
    width: 1212px;
    height: 617px;
    background-color: #bebaba;
    position: absolute;
}
.motherbox div{
    display: flex;
}

#cp{
    font-family: 'Noto Serif', serif;
    font-size: 90px;
    color: #FFFFFF;
    padding: 7px;
    text-shadow: 2px 2px 4px #000000;
    text-align: right;
}
.one{
    display: inline;
    position: relative;
    font-family: 'Noto Serif', serif;
    font-size: 70px;
    color: #EA4335;
    padding: 7px;
    text-shadow: 2px 2px 4px #9A9A9A;
    width: 30%;
    float: left;

}
.two{
    position: relative;
    font-family: 'Noto Serif', serif;
    font-size: 70px;
    color: #4285F4;
    padding: 7px;
    text-shadow: 2px 2px 4px #9A9A9A;
    text-align: right;
    width: 30%;
    float: left;
}
.three{
    position: relative;
    font-family: 'Noto Serif', serif;
    font-size: 70px;
    color: #34A853;
    padding: 7px;
    text-shadow: 2px 2px 4px #000000;
    text-align: right;
    width: 30%;
    float: left;
}
div.clear{
    clear: both;
}
div p{
   width: 100%;
   overflow-wrap: break-word;
}

＆＃13;

<body>

<!-- particles.js container -->
<div id="particles-js"></div>
<!--<div id="survey"></div>-->

<div class="form-container" id="form" style="display: block;">
    <div class="fd2" style="display: block;">
        <p class="quick" id="surv">
            <h1 id="cp">Quick Survey</h1>
        </p>
        <div class="motherbox">
            <div class="one" id="first">
            <p>1:sssssssssssssssssssssssssssssssddddddddddd</p>
            </div>
            <div class="two" id="second">
            <p>2:dddddddddddddddddddddgggggggggggggggggggggg</p>
            </div>
            <div class="three" id="three">
            <p>3:fddggggggggggggggggggggggggggggggggggggggggg</p>
            </div>
            <br style="float: left;">
        </div>
    </div>
</div>
<div class="clear"></div>

＆＃13;

Answer 2

您似乎正在混合使用Flexbox和浮动。您可以单独使用flex获得所需的输出。您还只需要在容器上设置flex css属性而不是子div。 Flexbox here的良好指南。

你还需要像在Scath的答案中那样在你的虚拟文本示例中打破你的长文本（如果用正常文本填充框，你可能实际上不想这样，因为默认情况下它可以在单词边界上被破坏）。分词选项here。

为防止溢出，您可以使用overflow css属性，以便框中的任何内容都不会跳出框（您可以隐藏它或make可滚动，如下面的示例所示）。 CSS溢出说明here。

＆＃13;

.fd2 {
  width: 1212px;
  height: 617px;
  background-color: #bebaba;
  position: absolute;
  overflow: scroll;
}

.motherbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#cp {
  font-family: 'Noto Serif', serif;
  font-size: 90px;
  color: #FFFFFF;
  padding: 7px;
  text-shadow: 2px 2px 4px #000000;
  text-align: center;
}

.one,
.two,
.three {
  font-family: 'Noto Serif', serif;
  font-size: 70px;
  color: #EA4335;
  padding: 7px;
  text-shadow: 2px 2px 4px #9A9A9A;
  width: 30%;
  word-break: break-all;
}

.two {
  color: #4285F4;
}

.three {
  color: #34A853;
}

div.clear {
  clear: both;
}

＆＃13;

<!-- particles.js container -->
<div id="particles-js"></div>
<!--<div id="survey"></div>-->

<div class="form-container" id="form">
  <div class="fd2">
    <p class="quick" id="surv">
      <h1 id="cp">Quick Survey</h1>
    </p>
    <div class="motherbox">
      <div class="one" id="first">
        <p>1:sssssssssssssssssssssssssssssssddddddddddd</p>
      </div>
      <div class="two" id="second">
        <p>2:dddddddddddddddddddddgggggggggggggggggggggg</p>
      </div>
      <div class="three" id="three">
        <p>3:fddggggggggggggggggggggggggggggggggggggggggg</p>
      </div>
    </div>
  </div>
</div>
<div class="clear"></div>

＆＃13;

Answer 3

你可以使用这样的东西

＆＃13;

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{margin: 0; padding: 0; font-family: 'Noto Serif', serif;}
.fd2{
    max-width: 100%;
    background-color: #eee;
}
#cp{
    font-size: 90px;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px #000000;
    text-align: center;
}

.motherbox{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.motherbox > div{
  font-size: 70px;
  text-shadow: 2px 2px 4px #9A9A9A;
  line-height: 1.6;
  letter-spacing: 1px;
  word-break: break-all;
  width: 30%;
  margin: 0 auto;
 }
.one{
  color: #EA4335;
}

.two{
  color: #4285F4;
}
.three{
  color: #34A853;
}

＆＃13;

<body>

<!-- particles.js container -->
<div id="particles-js"></div>
<!--<div id="survey"></div>-->

<div class="form-container" id="form" style="display: block;">
  <div class="fd2" style="display: block;">
    <p class="quick" id="surv"><h1 id="cp">Quick Survey</h1></p>
    <div class="motherbox">
      <div class="one" id="first">
        <p>1:sssssssssssssssssssssssssssssssddddddddddd</p>
      </div>
      <div class="two" id="second">
        <p>2:dddddddddddddddddddddgggggggggggggggggggggg</p>
      </div>
      <div class="three" id="three">
        <p>3:fddggggggggggggggggggggggggggggggggggggggggg</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

包含3个div到3列

3 个答案: