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;
}

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

1 个答案: