html - 将 Blockquote 和 p 标签与引号结合起来
问题描述
我试图用字符包围我bockquote
的 's 。"
但是,对于以下所有 HTML 场景,我无法使其灵活地工作:
<blockquote>
no p tag
</blockquote>
<blockquote>
<p>one p tag should be on a new line</p>
</blockquote>
<blockquote>
<p>one p tag should be on a new line</p>
<p>two p tag should be on a new line</p>
</blockquote>
我一直在尝试的 SASS:
blockquote {
quotes: "“" "”" "‘" "’";
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
p {
display: inline;
// OR
display: block;
}
}
如果我使用display: inline
,它可以工作,但是在有两个段落的情况下,我会丢失它们之间的换行符,并且两个段落都显示在一行上。
如果我使用display: block
, 或display: inline-block
, 我的段落现在用新行分隔,但引号字符也在新行上,而不是与段落文本一起流动。
我对 HTML 没有任何控制权。我想避免使用 JavaScript。这是我想看到的:
"no p tag"
"one p tag should be on a new line"
"one p tag should be on a new line
two p tag should be on a new line"
解决方案
您可以考虑display:inline
并使用以下另一种技术强制换行:
blockquote {
border: 1px solid red;
position: relative;
font-size: 2em;
}
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
blockquote p {
margin: 0;
display:inline;
}
/* a line break between two P */
blockquote p + p::before {
content:"";
display:block;
}
<blockquote>
no p tag
</blockquote>
<blockquote>
<p>one p tag should be on a new line</p>
</blockquote>
<blockquote>
<p>one p tag should be on a new line</p>
<p>two p tag should be on a new line</p>
</blockquote>
<blockquote>
<p>one p tag should </p>
<p>two p tag should be on a new line</p>
<p>two p a new line</p>
</blockquote>
推荐阅读
- jersey - 为 @Inject 定义一个自定义 InjectionResolver
- python - 多个返回函数构造函数参数
- windows - Win10 上的 sysprep 退出并出现错误 RunExternalDlls:Not running DLLs
- angular - 循环遍历具有条件的对象时,不匹配时显示空项目符号
- performance - redis.call('HMGET', key, value) 和 redis.hmget(key, value) 的区别?
- r - ShinyApp 中的错误:找不到函数
- sql - 如何在 oracle 中将 3 列添加为 1
- arrays - 什么时候分配静态数组,什么时候释放它们?
- c# - C#进程线程不能写输出
- mongodb - 使用 mongodb (JOIN) 反向查找聚合查询