Question

我正在使用CSS创建编号旁注，主文本正文中包含锚定号。

问题在于，根据数字的位置和/或视口大小调整，该数字将独立于其后的单词换行到新行。

有没有办法强制计数器和前面的单词包装在一起？例如，使用CSS列可以优先选择或抑制列分隔符。

Codepen：http://codepen.io/dredmorbius/pen/OVmBaZ

article {
  padding: 1em 4em;
  max-width: 30em;
  margin: 0 auto;
  counter-reset: noteNum;
}

article sidenote notetext {
    background: #fffee8;
    border: solid 1px #333;
    border-width: 1px 0;
    float: right;
    display: inline-block;
    margin: 0.25rem -5rem 0.75rem 1rem;
    padding: 0.25rem 0.5rem;
    width: 8rem;
}

article sidenote notetext::before {
    counter-increment: noteNum;
    content: "Note " counter(noteNum) ": ";
    padding-right: 0.2em;
    font-style: italic;
}

article sidenote::after {
    vertical-align: super;
    font-size: 0.6em;
    display: inline-block;
    margin-left: -0.2em;
    width: 1rem;
    content: counter(noteNum) "";
}

所需包装的示例：http://i.imgur.com/C304TR3.png

不受欢迎的包装示例：http://i.imgur.com/3KltUyT.png

注意两张图片中上标“1”的位置。

Answer 1

将display: inline-block更改为display: inline，它会保留上标。

article sidenote::after {
  vertical-align: super;
  font-size: 0.6em;
  display: inline-block;
  margin-left: -0.2em;
  width: 1rem;
  content: counter(noteNum) "";
}

CSS：将它保持在一行 - 内容与元素和::在内容之后

1 个答案: