CSS

Question

目前我在div中有一个段落。在移动模式（768 像素）下查看时，div 会随着我放入一个长文本作为段落而延伸。当我用短文本替换长文本时，例如 'Box One'，它不会拉伸 div，因为我没有超过 div 宽度。在移动模式下查看时，如何让段落在达到 div 宽度时换行？我附上了我的 jsfiddle 作为示例。

https://jsfiddle.net/ModestGrey/az4ca9j8/

HTML

<div class="boxes">
<div class="one box"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></div>
  <div class="two box"><p>Box Two</p></div>
  <div class="three box"><p>Box Three</p></div>
  <div class="four box"><p>Box Four</p></div>
</div>

CSS

.boxes {
  width: 50%;
  margin: 0 auto;
}

.box {
  display: inline-block;
  width: 24%;
  height: 15em;
  color: #fff;
}

.one {
  background: #333;
}

.two {
  background: #fff;
  color: #333;
}

.three {
  background: #aaa;
}

.four {
  background: #dc002e;
}

@media only screen and (max-width:48em) {
  .boxes {
    display: table;
    width: 100%;
  }
  .box {
    display: block;
    width: 100%;
  }
  .three {
    display: table-caption;
  }
  .four {
    display: table-caption;
  }
  .one {
    display: table-caption;
  }
  .two {
    display: table-caption;
  }
}

Answer 1

您可以在 @media 中使用 word-wrap 来强制断开长单词：

 word-wrap: break-word;

Answer 2

使用 css word-wrap: break-word; 允许长单词能够换行。

Answer 3

给你：

.box { display: block; float: left; }
.one.box p { overflow: hidden; word-wrap: break-word; }

https://jsfiddle.net/60Lmtdtd/

CSS - 段落正在拉伸 DIV 的宽度

CSS - Paragraph is stretching the width of the DIV

html

mobile

paragraph

responsive-design