防止报价换行答案

【问题标题】：Prevent quote wrap防止报价换行
【发布时间】：2015-12-15 01:22:40
【问题描述】：

我从服务器获取一些文本，并使用标记在前端添加引号。问题是有时只有结束引号被换行。如何防止这种情况发生。

我不介意最后一个词是否与引号一起包装。

我尝试在文本上使用 white-space: nowrap 但我事先不知道文本的长度，所以我不希望它超过包含元素的宽度，所以 white-space: nowrap 不起作用。

编辑：

<div class="quote">

        <span class="quote-opening">&ldquo;</span>
        <p class="quote-body">Some famous quote here thats being returned from the server
            <span class="quote-closing">&rdquo;</span>
        </p>
                                
</div>


.quote{

	.quote-opening{
		width: 10%;
		display: inline-block;
  		vertical-align: top;
	}

	.quote-body{
		width: 90%;
	}

}

我只想将文本和右引号缩进，边距为 10 像素。这就是为什么我试图做 display: inline-block 的开头引号。

【问题讨论】：

最后一个单词和引号之间是否有空格？我做了一些检查，我得到的行为是，如果一个单词后面跟着一个引号并且引号不合适，那么它会换行。
谢谢！我认为这行得通。将跨度移动到与 p 标签相同的行。此外，由于某种原因，服务器最后还返回了一个空格。如果有人看到这个 - 检查两者以确保。

标签： css

【解决方案1】：

使用overflow:hidden 应用于您的报价应该有效，但这取决于您的实施。提供您的代码会有所帮助。

This existing answer 解释了这种技术的应用。

【讨论】：