防止包装中段落的跨度

Question

我在span元素中放置了引号符号，这些元素是p元素的子元素。在视觉上，可以应用不同的引用样式，这需要稍微不同的CSS。由于后端解决方案的原因，我需要将引号放在HTML中，我不能将它们放在CSS中。

根据窗口宽度，在某些情况下，最后一个.quot--qr会中断到下一行。

如何让.quot--qr表现得不会破坏下一行？

在这里，您可以在结果面板大约时看到问题。 245px宽：http://jsfiddle.net/jqnyxkrg/

问题的屏幕截图

HTML

<div class="quot--wrapper">

  <p class="quot--text">
    <span class="quot--ql quot--style-a">„</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit consectetuer adipiscing elit adipiscing elit lorem.
    <span class="quot--qr quot--style-a">“</span>
  </p>

</div>

CSS

.quot--text {
  display: inline;
  padding-right: 0px;

  font-family: "Arial","Helvetica",sans-serif;
  font-size: 25px;
  line-height: 31px;
  letter-spacing: 0px;
  margin-top: -5px;
  margin-bottom: 10px;
}

.quot--ql,
.quot--qr {
  position: relative;
  line-height: 0;
  font-family: "Arial","Helvetica",sans-serif;
}

/* these values are different for each possible "quot style" */
.quot--ql.quot--style-a, 
.quot--qr.quot--style-a {
  font-size: 76px;
}

.quot--ql.quot--style-a {
  top: -11px;
}

.quot--qr.quot--style-a {
  top: 38px;
}

Answer 1

我给你做了两个小提琴：

第一，两个元素的绝对定位，因为我没有承受这个问题;-) http://jsfiddle.net/jqnyxkrg/2/

.quot--text {   
  position:relative;
  padding-left: 1.5em; 
}
.quot--ql.quot--style-a, 
.quot--qr.quot--style-a {
  font-size: 76px;
  position:absolute;
}    
.quot--ql.quot--style-a {
  top: -11px;
  left:0;
}    
.quot--qr.quot--style-a {
  bottom: -11px;
  right:0;
}

第二个可以满足您的需求，但在某些内容/宽度组合中可以覆盖文本的最后一个字母。 http://jsfiddle.net/jqnyxkrg/3/

.quot--qr.quot--style-a {
  position: absolute;
  bottom: -11px;
  right:0;
}

也许你的解决方案可能是在最后一个字母和跨度之间添加一个没有间隔的空格，但这可能会导致其他问题。