CSS 强制换行

Question

在第一张图中，圈出的区域是两个inline-block div元素。目前，当我将浏览器 window 变小时，第二个 div 元素会按预期跳到第一个元素下方。我想要的是当我使 window 变小时使第二个 div 元素内的文本换行，并使第一个 div 元素下的 space 为空。

Answer 1

很简单，只需添加这个 CSS 属性:

word-wrap: break-word;
/* To break the text */

此外，您不应该为此目的使用内联块。相反，使用 flexbox 或网格。示例：

<section>
 <div class="details">
 </div>
 <div class="description">
  <p> Text </p>
 </div>
</section>

section {
 display: grid;
 grid-template-columns: 250px 1fr;

}

.details {
  grid-column: 1 / 2;
}

.description {
 width: 100%;
 grid-column: 2 / 3;
}

.description p {
 word-wrap: break-word; /* Will break the text*/
}

Answer 2

你可以使用 Flexbox :)

div {
  display: flex;
  flex-flow: row wrap;
}

div>div:first-child {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

div>div>div:last-child {
  background: orange;
}

div>div:last-child p {
  margin: 0;
}

<div>
  <div>
    <div>#15</div>
    <div>OPEN</div>
  </div>
  <div>
    <p>TODO: add a destination for Hello, User hyperlink</p>
  </div>
</div>

Example on Codepen

Answer 3

感谢您的回答。最后我得到了我想要的结果：

<div id="big">
  <div id="left">
    <div>#15</div>
    <div>OPEN</div>
  </div>
  <div id="right">
    <p>TODO: add a destination for Hello, User hyperlink</p>
  </div>
</div>

<style>
#big {
  display: flex;
}

#left {
  flex-shrink: 0;
  width:100px;
  display: flex;
  flex-direction: column;
}

div, p {
    margin:0;
}
</style>

CSS 强制换行

CSS forced wrap

html

css

text

word-wrap