html - 防止在内联块元素之前换行

我想显示一个报价。在引号的开头和结尾都有引号，显示为背景图像。引号的开头和第一个单词之间，或引号中的最后一个单词和结尾与引号之间不应有换行符。为此，我尝试使用white-space: nowrap;。以下代码片段可以满足我的要求：

.quote {
  width: 10px;
  white-space: nowrap;
  background: red;
}
.quote-text {
  white-space: normal;
}
.quote-start,
.quote-end {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: blue;
}

<div class="quote">
   <span class="quote-start"></span>
   <span class="quote-text">text that is wrapped over several lines</span>
   <span>&#xfeff;</span>
   <span class="quote-end"></span>
</div>

您可以在此CodePen中对其进行测试。

但是没有丑陋的<span>&#xfeff;</span>有什么办法做到这一点吗？

最佳答案

您可以在伪元素之前和之后。你想要这个吗？检查代码笔并回复。
http://codepen.io/SESN/pen/MeeaGp

 .quote {
  width: 10px;
  white-space: nowrap;
  background: red;

}
.quote:before, .quote:after { content: ""; position: relative; background: url(http://1axcbc2mo5e72fuf7p2ouonc.wpengine.netdna-cdn.com/wp-content/uploads/2012/01/left-quotation-marks.png) no-repeat; background-size: contain; padding: 0px 5px 0px 10px;
}

.quote:after { }
.quote-text {
  white-space: normal;
}
.quote-start,
.quote-end {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: blue;
}

关于html - 防止在内联块元素之前换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37831300/