Html 避免在手机上包装CSS报价

我有一个我正在设计的响应性区块报价，它看起来很好，直到我们进入移动版本。当屏幕尺寸降到最小值时，我得到的是一个挂起的引号，它没有附加到结束词上。见下图

我尝试添加

空白：nowrap

但它似乎仅对引号不起作用。相反，它现在包含了整个引用

CSS:

blockquote {
   background: #f9f9f9;
   border-left: 10px solid #ccc;
   margin: 1.5em 0px;
   padding: 0.5em 1em;
   quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
   color: #ccc;
   content: open-quote;
   font-size: 4em;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
}
blockquote:after {
   color: #ccc;
   content: close-quote;
   font-size: 4em;
   line-height: 0.1em;
   vertical-align: -0.4em;
   margin-left: 0.25em;
}
blockquote p {
   display: inline;
}

<blockquote>
<p style="text-align: center;"><em>Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.</em></p>
</blockquote>

HTML:

blockquote {
   background: #f9f9f9;
   border-left: 10px solid #ccc;
   margin: 1.5em 0px;
   padding: 0.5em 1em;
   quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
   color: #ccc;
   content: open-quote;
   font-size: 4em;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
}
blockquote:after {
   color: #ccc;
   content: close-quote;
   font-size: 4em;
   line-height: 0.1em;
   vertical-align: -0.4em;
   margin-left: 0.25em;
}
blockquote p {
   display: inline;
}

<blockquote>
<p style="text-align: center;"><em>Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.</em></p>
</blockquote>

给一个人一条鱼，你就喂他一天；教一个人钓鱼，你就喂他一辈子

---

我认为空格是问题所在。如果

blockquote

元素末尾有空格（空格、制表符、新行），则会出现此行为

您必须修剪空格，以便在cloing

标记之前没有空格

请参见此处了解区别：

---

编辑 你必须删除段落结尾后的换行符

<blockquote>
<p style="text-align: center;"><em>Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.</em></p></blockquote>

给一个人一条鱼，你就喂他一天。教一个人钓鱼，你就可以养活他一辈子

---

blockquote{position:relative；}

blockquote:after{position:absolute；}

---

这将解决您的问题。

这是一种黑客解决方案，但您可以尝试在HTML中键入引号，并仅在手机上显示它们，然后在结束引号和最后一个单词周围应用不换行符。例如：

“给一个人一条鱼，你可以喂他一天。教一个人钓鱼，你可以喂他一辈子。”
。然后，您可以使用
.mobileonly
类使您的报价看起来像正常情况一样。您也可以共享您的html吗？您在哪个浏览器中看到这种行为？我在windows 10上的crome中没有看到这一点：区块报价末尾有空格吗
Lorem
，然后修剪它。Mac和iPhone上的Safari。也许这是浏览器差异的问题，但两者看起来是一样的。我正在Mac和iPhone上使用Safari。尝试删除新线路，但没有效果。Wordpress对这个变化没有任何不同的认识，因为它是一个标签。我对WP的了解不足以帮助你。我认为空白是错误显示的问题。但是如何删除WP中的空白是一项不同的任务，您应该为此提出一个新的问题。在这个新问题中，您应该粘贴生成该输出的WP代码，并询问如何删除“p”标记后的空白