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

Question

我想显示引号。在报价的开头和结尾，都有一个引号，显示为背景图像。起始引号和引文的第一个单词之间，或者引文的最后一个单词和结束引号之间，不应该有换行符。为此，我尝试使用 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></span>？

Answer 1

你可以在伪元素之前和之后。你想要这个吗？检查codepen并回复。 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;
}

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

Prevent line break before inline-block element

html

css

line-breaks