HTML/CSS - 将多个文本元素连接在一起

Question

我有以下代码：

HTML:

<div class="wrapper">

  <p>Example text</p>
  <p>Example text 2</p>

  <div class="markdown">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Curabitur aliquam velit nec molestie pharetra. Etiam fermentum <code>ligula</code> non justo ornare mollis. Praesent vitae metus erat. Morbi vitae sollicitudin justo.</p>
  </div>

</div>

CSS:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

它有一个包装器 div、几个 p 元素，然后是一个带有渲染降价的 div。然而，正如在 JSFiddle 中看到的那样，前两个 p 元素连接在一起，但文本的其余部分没有。我怎样才能让它看起来像一个连续的文本元素？

Answer 1

您的 div 被换行到下一行，因为它足够大了。 flex-wrap 对此行为负责。没有 flex-wrap 它看起来像这样：

.wrapper {
  display: flex;
  align-items: center;
}

<div class="wrapper">

  <p>Example text</p>
  <p>Example text 2</p>

  <div class="markdown">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Curabitur aliquam velit nec molestie pharetra. Etiam fermentum <code>ligula</code> non justo ornare mollis. Praesent vitae metus erat. Morbi vitae sollicitudin justo.</p>
  </div>

</div>

但是，它只会并排创建 3 个块，看起来不像一个连续的文本元素。 None 的 flex 属性可以做到这一点，除非它真的是一个连续的文本。

块元素上的连续文本

您可以使用 display:contents; 来达到这样的目的：

.wrapper {
  display: flex;
  align-items: center;
}
.wrapper * {
  display: contents;
}

<div class="wrapper">

  <p>Example text</p>
  <p>Example text 2</p>

  <div class="markdown">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Curabitur aliquam velit nec molestie pharetra. Etiam fermentum <code>ligula</code> non justo ornare mollis. Praesent vitae metus erat. Morbi vitae sollicitudin justo.</p>
  </div>

</div>

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.

Source: caniuse.com

Answer 2

.wrapper {
  display: flex;
  felx-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.wrapper>p{
  flex: 1 1 0px;
  background: #ff88ff;
}

.wrapper>.markdown {
  flex: 1 1 0px;
}

<div class="wrapper">

  <p>Example text</p>
  <p>Example text 2</p>

  <div class="markdown">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Curabitur aliquam velit nec molestie pharetra. Etiam fermentum <code>ligula</code> non justo ornare mollis. Praesent vitae metus erat. Morbi vitae sollicitudin justo.</p>
  </div>

</div>

这是你想要的吗？

是 --> 使用 flex 属性在 display:flex children 上设置宽度；你也可以使用宽度，但我更喜欢 flex

此外，如果您将 flex-wrap 与没有宽度或弹性属性的元素一起使用，那么如果它高于 parent 元素

，它将被换行

HTML/CSS - 将多个文本元素连接在一起

HTML/CSS - Joining multiple text elements together

html

css

alignment

text-alignment

块元素上的连续文本