Html 防止段落中的跨度被环绕

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

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

我如何才能使.quot qr正常工作，使其不会中断到下一行

拨动此处，当结果面板约为245像素宽时，您可以看到问题：

问题截图

HTML

---

我给你做了两把小提琴：

第一，两个要素的绝对定位，因为我不理解这个问题-

第二个可以满足您的需要，但在某些内容/宽度组合中，可以覆盖文本的最后几个字母。

---

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

如果您可以修改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>

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

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

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