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

【问题标题】：HTML/CSS - Joining multiple text elements togetherHTML/CSS - 将多个文本元素连接在一起
【发布时间】：2021-03-15 14:53:23
【问题描述】：

我有以下代码：

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 元素连接在一起，但文本的其余部分没有。如何让它看起来像一个连续的文本元素？

【问题讨论】：

标签： html css alignment text-alignment

【解决方案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 个块，看起来不像是连续的文本元素。除非它真的是一个连续的文本，否则任何 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 使元素的子元素看起来好像是元素父元素的直接子元素，忽略元素本身。

来源：caniuse.com

【讨论】：

谢谢，不知道display: contents是个东西
@APixelVisuals 是的，它很新。请小心，因为它不适用于 IE11。您可以查看supported browsers on caniuse。

【解决方案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 和一个没有 width 或 flex 属性的元素，那么如果它高于父元素就会被包裹

【讨论】：