如何在HTML/CSS中挂标点符号

Question

今天有没有一种很好的方法可以在HTML/CSS中进行挂标点,因为浏览器没有实现该hanging-punctuation属性？

更新: JavaScript解决方案会很好,因为除了引用脚本的一行之外,它还能让我不要触摸我的html.

类似的东西,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

你也可以使用: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;
}