在文本上浮动文本答案

【问题标题】：Floating text over text在文本上浮动文本
【发布时间】：2015-10-30 19:02:44
【问题描述】：

我正在尝试创建一个可以应用于任何文本的拉引号类。通常这将是一个简短的引用，我想向右浮动。我希望正文中的文本达到浮动拉引号中每一行的设置边距。

Goal: http://i.stack.imgur.com/XC5NA.jpg

我遇到的问题是 div 或 span 在浮动文本周围创建了一个矩形，因此拉引号中较短的行在左侧有很多空白。

我得到的例子：i.stack.imgur.com/bvJv2.jpg

我希望这个文本流效果自动工作，这意味着我不想自动设置每行的“宽度”。我只想将一个类应用于 div 或 span 并让它实现这种外观。我也想保留这个 HTML/CSS/CSS3。我不能轻易地将 JS 应用于此，因为我正在处理的是一个封闭的 CMS。

有什么技巧吗？这甚至可能吗？

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议您通过 Google 或通过搜索 SO 进行一些额外的研究，然后尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
另外...@Scotty 你的图片 bvJv2.jpg 链接不正确
@Paulie_D：我不认为这是一个“为什么我的代码不起作用”类型的问题，而是一个“我该如何处理这个”概念性问题。我不确定是否有一些我不知道的 CSS 属性。我找不到任何关于在文本上浮动文本但让文本流入 div 的信息。
@Age：我还没有足够的声誉来拍多个链接、图片等。

标签： html css

【解决方案1】：

据我所知，如果文字环绕在其他文字周围，那么您尝试做的事情是不可能的。

但是，可以在浮动形状周围环绕文本。查看CSS shapes 的规范。

也许你可以用多边形做一些事情来创造你想要完成的效果；不过，我怀疑这将是一个挑战，因为您的报价内容很可能是动态的。

【讨论】：

我看到了浮动形状的想法，它在桌子上。但是，我更愿意为所有拉引号设置 CSS 处理，而不必为永远引用手动设置新形状。这将在 CMS 主题中启动，许多将要部署它的用户不具备手动调整形状的技术知识。

【解决方案2】：

做这样的事情怎么样：https://jsfiddle.net/ToreanJoel/wfoezo0t/1/

制作一个h1 标签并在其中为每个单词/几个单词放置一些跨度。

<h1>
  <span>"This is a</span>
  <span class="spacer"></span>
  <span>blockquote</span>
  <span class="spacer"></span>
  <span>to test"</span>
</h1>

那么对于css如下：

h1 {
    font-size:44px;
    margin: 0;
    font-family: sans-serif;
}
h1 span{
    float:right;
    text-align: right;
    clear:both;
    margin: 0;
    margin-left: 14px;
}

.spacer {
    height: 10px;
}
.paragraph {
    text-align: justify;
}

请注意，我让标题（.paragraph 类）周围的文本是合理的，这会给你这样的东西：https://jsfiddle.net/ToreanJoel/wfoezo0t/1/

记住它是可编辑的，祝你好运

【讨论】：

我喜欢这种方法，我可能不得不走这条路。不必手动拆分线路会很好，但我可能别无选择。感谢您的帮助！
总是很高兴知道它有帮助，如果您找到其他解决方案，请告诉我任何更新，我发现这些问题很有趣