防止跨段换行

Question

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

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

如何使.quot--qr表现为不会中断到下一行？

在这里摆弄小提琴，您可以在结果面板约为时看到问题。 245像素宽： 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;
}

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