如何在 HTML / CSS 中使用标点符号

Question

今天在 HTML / CSS 中有没有一个很好的方法来做悬挂标点符号，因为浏览器还没有实现 hanging-punctuation 属性?

更新： JavaScript 解决方案会很好，因为除了引用脚本。

类似于 1) 遍历所有 p、span 和 blockquote。如果他们以“，...或其他东西开头，则调整间距。但我似乎无法弄清楚如何知道要改变多少间距，以及如何处理第一个字符以外的任何内容元素中的行。

    var elements = document.querySelectorAll('p, span, blockquote');
console.log(elements);
var i = 0;
while (i < elements.length) {
  var el = elements[i];
  if (el.firstChild.nodeValue && el.firstChild.nodeValue.match(/^[".,']/)) {
    el.style.position = 'relative';
    el.style.left = '-.4em';
  }
  i += 1;
}

代码正在进行中...

Answer 1

您可以使用负文本缩进：

blockquote p {
  text-indent: -.4em;
  background-color: #faebbc;
}

<p>There's a block quote on the next line:</p>
<blockquote><p>"I have negative text indent."</p></blockquote>

（提示改编自 http://css-tricks.com/almanac/properties/h/hanging-punctuation/）

Answer 2

您也可以使用 :before 和 :after:

伪造它

p {
    margin-left: 1em;
    background-color: #eee;
}

p:before {
    content: '"';
    position: absolute;
    margin-left: -.4em;
}

p:after {
    content: '"';
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo semper nulla at consectetur. Quisque at aliquam turpis, eu rhoncus dolor. Aliquam quis aliquam ante. Suspendisse tempus, erat eget scelerisque rhoncus, lacus eros luctus ante, a consequat quam tortor a quam. Suspendisse congue, ipsum sit amet venenatis ornare, ligula tortor fermentum est, et aliquet augue nisl id leo. Suspendisse gravida nisl in arcu condimentum gravida. Maecenas aliquam nisi nec congue viverra. Duis at lacinia justo.</p>

编辑：

有人指出负边距是 -.4em 因为它恰好是给定字体中引号字符的宽度，因为它是可变宽度字体。

非特定于字体的解决方案可能是将项目设为 1em 宽，然后将文本右对齐：

p:before {
  content: '"';
  position: absolute;
  margin-left: -1em;
  width: 1em;
  text-align: right;
}

如何在 HTML / CSS 中使用标点符号

How to do Hanging Punctuation in HTML / CSS

html

css

typography