我有一个正在设计样式的响应式 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>
最佳答案
blockquote { position:relative; }
blockquote:after { position: absolute; }
这将解决您的问题。
关于html - 防止 CSS 引用在移动设备上换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39032352/