html - 防止 CSS 引用在移动设备上换行

Question

我有一个正在设计样式的响应式 block 引用，在我们进入移动版本之前它看起来不错。当屏幕尺寸降到最低限度时，我最终得到了一个没有附加到结束词的挂引号。请参见下图。

我试过添加 white-space: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;
}

HTML:

<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>

Answer 1

blockquote { position:relative； }

blockquote:after { position: absolute; }

这将解决您的问题。