时间戳

首页 > 解决方案 > HTML/CSS - 将多个文本元素连接在一起

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

问题描述

我有以下代码：

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

标签： htmlcssalignmenttext-alignment

解决方案

你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

推荐阅读