将此标记映像为对话:
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
现在,要根据西班牙语语法打断这一段,输出必须是:
- 来这里! -他说-。为什么要带你这么久?
(注意em-dashes的位置,它们周围的空格以及描述中的句点。)
是否有纯CSS解决方案输出此而不更改HTML?
[在英语中,引号围绕着口头文字。然而,在西班牙语中,在最初的em-dash(周围没有空格)之后,描述是被包围的那个,由两个em-dashed在里面没有空格。]
答案 0 :(得分:1)
你可以用一些伪造的元素来伪造引号,注意删除最后一个。
p{font-size:1.5em;}
q:before{
content: "— ";
}
q:after {
content: " —";
}
q:last-of-type:after {
content: "";
}
&#13;
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
&#13;
使用纯CSS无法移动点,或者我无法想到以任何方式执行此操作。我相信你需要在服务器端或使用一些javascript
解析它嗯,可能是一种方式,但这是非常具体的。
p{font-size:1.5em;}
q:before{
content: "—. ";
margin-left:-12px;
background:white;
}
q:first-of-type:before{
content: "—";
}
q:after {
content: " —";
margin-right:-4px;
}
q:last-of-type:after {
content: "";
}
&#13;
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
&#13;
将破折号拉向澄清(基于px
的任意幻数,完全取决于所选字体及其大小),然后使用background-color
(应该与真实的背景相匹配)在实际的点液体纸张样式上绘画,并在每个引号上的短划线后添加点,这不是第一个。
正如我所说的那样,具体可笑,而且脆弱。您更改字体,字体大小或背景颜色的那一刻,或只是有一个不会结束的澄清&#34;。 &#34;,它会破裂。