使用 span::before，段落中的跨度可以垂直定位在该段落中吗？答案

【问题标题】：Using span::before, can a span within a paragraph be vertically positioned within that paragraph?使用 span::before，段落中的跨度可以垂直定位在该段落中吗？
【发布时间】：2016-05-19 11:58:06
【问题描述】：

有没有办法垂直对齐段落中声明的跨度，并将跨度的顶部与段落的顶部对齐？

<p> lots of text <span data-pullquote="special text">special text</span></p>

这里更好https://jsfiddle.net/HeavyThumper/e4e01p0h/

这是否可以在不改变段落样式或需要另一个容器的情况下实现？

【问题讨论】：

标签： html css vertical-alignment pseudo-element

【解决方案1】：

更新

就 CSS 而言，有一些方法可以将拉引号移动到段落的顶部，不幸的是，position、transform:translate 等属性会将拉引号从流程中移除，从而禁用 float财产。结果是 pullquote 在顶部移动，但也混合到文本中，而不是在它周围流动的文本。 padding-bottom 不起作用，因为它破坏了 pullquote 下面的文本。我能想到的唯一需要最少准备和工作的解决方案是使用 JavaScript。

将以下内容添加到 JavaScript 的末尾：

var pq = document.querySelectorAll('span[data-pullquote]');
var pqArray = Array.prototype.slice.call(pq);
for (var i = 0; i < pqArray.length; i++) {
  var para = pqArray[i].parentElement;
  var pqHTML = pqArray[i].outerHTML;
  para.removeChild(pqArray[i]);
  para.insertAdjacentHTML('beforebegin', pqHTML);
}

这是一个工作演示：

FIDDLE

旧

看起来像这样吗？ https://jsfiddle.net/zer00ne/rzeqo7qz/ 我将<span> 移到顶部并将其设为<q> 用于语义，但<blockquote> 可能会更好。

【讨论】：

这就是我希望它看起来的方式 - 但是通过在段落中的文本上使用某种形式的分隔符（目前是） - 不需要我在开头添加额外的文本.用于此的应用程序是由 Pelican 生成的 html，使用来自 Markdown 源的 pullquote 插件。所以我希望能够简单地输入我的源文本，为拉引号分隔短语，然后让魔法发生。它现在工作正常 - 但文本垂直定位在它声明的位置。我想更改垂直位置 - 无需单独键入文本。
我可以轻松更改插件使用的 html 分隔符 - 所以如果需要替换为其他没有问题的东西。但是将文本行移动到其他地方，而不需要我在源代码中复制它，将更具挑战性。
唯一想到的是使用一点 JavaScript 在生成后将拉引号移动到段落的顶部。如果您使用position 属性，它将不再具有浮动属性，并且文本不会在拉引号周围重排，与transform: translate 相同。 padding-bottom 不起作用，因为它会破坏文本。