CSS浮动注释与自己的流程

Question

更新

我提出了赏金，但从未实现过正确答案。我已经实现了一个适用于我的JS解决方案，但我还没有将答案标记为正确。如果只使用CSS / HTML，我仍然希望看到它。但普遍的共识是，它目前无法实现。

目标

CodePen here，底部是可运行的代码段。

我有一些HTML内容，我想用一条直接浮在其上方的小消息进行注释，在最左侧，有点像<ruby>注释（但不完全一样）。可以有许多内容，每个内容都有自己的注释。内容必须遵循正常的文本流程。这是我目前的HTML：

<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>still no</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

工作示例

下面，句子It's a bird, it's a plane, it's Superman! Go get the Kryptonite有4个独立的部分（4个content），每个部分用不同的颜色表示。每条内容都有自己的annotation，在其上方以斜体显示。

我的工作原理是制作内容和注释float: left，并为注释添加否定margin。这是CodePen中的示例1。

破碎的例子1

注释比内容长时会出现问题。下面，still no的注释已更改为更长的you may be right。两个内容行继续遵循正常的内联流（根据需要），但由于注释仍然排列在其内容的左边缘，因此它们重叠。

这是CodePen中的示例2。

破碎的例子2

建议的解决方案是使用带有visibility:collapse的表来进行对齐，这可以很好地防止重叠，但是在注释开始超过左边缘的情况下，它会在注释后产生额外的空间。内容。

应该如何运作

我希望注释遵循自己的流程，但没有打破内容的自然内联流。请参阅下文内容行仍然是一个单一的完整句子，但yeah!向右移动以允许长you may be right拥有所需的所有空间。但是，muahaha会更正，因为它有空间可以直接坐在Go get the kryptonite之上。

我可以更改CSS和HTML来实现这一点，但只有CSS的解决方案才是最佳选择。感谢。

＆＃13;

＆＃13;

.item {
  margin-top: 20px;
}
.content, .annotation {
  float: left;
  white-space: pre;
}
.annotation {
  margin-top: -25px;
  font-style: italic;
}


h3 {
  clear: both;
  margin: 0;
  padding: 20px 0;
}

td:first-child {
  color: red;
}
td:nth-child(2) {
  color: green
}
td:nth-child(3) {
  color: blue;
}
td:nth-child(4) {
  color: orange;
}

＆＃13;

<h3>Working Example</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>still no</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>


<h3>Broken Example 1 (note the overlap)</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>you may be right</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

<h3>Broken Example 2 (note the overlap)</h3>
 <table>
  <tr style='font-style: italic'>
    <td>nope</td><td>you may be right</td><td>yeah!</td><td>muahaha</td>
  </tr>
  <tr style="visibility:collapse;"><td>It's a bird, </td><td>it's a plane, </td><td>it's Superman! </td><td>Go get the kryptonite</td></tr>
</table>
<table style="margin-top:-25px;"><tr><td>It's a bird, </td><td>it's a plane, </td><td>it's Superman!</td><td>Go get the kryptonite</td></tr></table>

<h3>How it should look (cheating with positioning)</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>you may be right</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation' style='margin-left: 35px'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

也许这适合你：

＆＃13;

＆＃13;

<table>
  <tr>
    <td>nope</td>
    <td>you may be right</td>
    <td>yeah it is!</td>
  </tr>
  <tr style="visibility:collapse;">
    <td>It's a bird,</td>
    <td>it's a plane,</td>
    <td>it's Superman!</td>
  </tr>
</table>
<table style="margin-top:-25px;">
  <tr>
    <td>It's a bird,</td>
    <td>it's a plane,</td>
    <td>it's Superman!</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

http://codepen.io/anon/pen/OVWBLv

我想我只用CSS得到它：

.item {
  display: inline-block;
}
.content, .annotation {
  display: inline;
  white-space: pre;
}
.annotation {
  font-style: italic;
}

.annotation:after {
  content: "";
  display: inline-block;
  width: 100%;
}

伪元素强制内容到注释的下一行，而父.item被内联阻塞以保持彼此相邻。

Answer 3

我不确定这是不是你所追求的，但这里是modified CodePen

HTML：

<!-- first group -->
<div class='item'>
  <div class='annotation'>I'm an annotation</div>
  <div class='content'>I am the actual content </div>
</div>
<div class='item'>
  <div class='annotation'>I'm a second annotation</div>
  <div class='content'>I am a second piece of content</div>
</div>

<!-- second group -->
<div class='item'>
  <div class='annotation'>I'm a particularly long annotation</div>
  <div class='content'>I am the actual content </div>
</div>
<div class='item'>
  <div class='annotation'>I'm a second annotation</div>
  <div class='content'>I am a second piece of content</div>
</div>   

CSS：

.item {
  font-size: 20px;
  margin-top: 30px;
  float: left;
}
.content, .annotation {
  white-space: pre;
}
.annotation {
  margin-top: -25px;
  font-style: italic;
}

我基本上移动了浮动：从.content, .annotation元素到.item的左声明。

希望这有帮助。

Answer 4

我并不完全清楚你所追求的是什么，但是如果每个项目/内容都有很多注释，那么将它们包装在自己的容器中是有意义的（比如称为notes）

然后可以将注释声明为inline，而不会中断其他元素的流动。

正如我所说的那样，在我认为下面是我能来的最接近的情况之后，我不知道你是什么。

Codepen Demo

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.item {
  font-size: 20px;
  float: left;
  width: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid red;
}
.notes {
  overflow: hidden;
}
.annotation {
  font-style: italic;
  display: inline;
  margin-right: 1em;
}

＆＃13;

<div class='item'>
  <div class="notes">
    <div class='annotation'>I'm an annotation</div>
    <div class='annotation'>I'm a second annotation</div>
  </div>
  <div class='content'>I am the first content</div>
</div>
<div class='item'>
  <div class="notes">
    <div class='annotation'>I'm an annotation</div>
    <div class='annotation'>I'm a second annotation</div>
  </div>
  <div class='content'>I am the second content</div>
</div>

<div class='item'>
  <div class="notes">
    <div class='annotation'>I'm an long long long long annotation</div>
    <div class='annotation'>I'm a second annotation</div>
  </div>
  <div class='content'>I am the third content</div>
</div>

<div class='item'>
  <div class="notes">
    <div class='annotation'>I'm an long long long long annotation</div>
    <div class='annotation'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, aspernatur.</div>
  </div>
  <div class='content'>I am the fourth content</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

由于共识似乎表明单独使用CSS是不可能的，所以我在下面有一个JS解决方案，但它有一些令人讨厌的包装边缘情况。

CodePen

基本上将注释和内容放在不同的行上，inline-block

<div class='annotations'>
  <div class='annotation' style='color: red'>nope</div>
  <div class='annotation' style='color: green'>you might be right</div>
  <div class='annotation' style='color: blue'>hell yeah it is</div>
</div>
<div class='contents'>
  <div class='content'style='color: red'>It's a bird, </div>
  <div class='content' style='color: green'>it's a plane, </div>
  <div class='content' style='color: blue'>it's Superman!</div>
</div>

.content, .annotation {
  white-space: pre;
  display: inline-block;
}
.annotation {
  font-style: italic;
}

然后使用JS将每个注释的width设置为两个宽度（它自己或其内容）中的较大者。

const items = _.zip(
  _.toArray(document.getElementsByClassName('annotation')),
  _.toArray(document.getElementsByClassName('content'))
)

_.forEach(items, ([annotation, content]) => {
  const max = Math.max(content.offsetWidth, annotation.offsetWidth)
  annotation.style.width = `${max}px`
})

所需的结果：

Answer 6

这样的事情怎么样？ Codepen here.

编辑，6/1：这个答案是唯一能够解决问题的答案。你不想要多行注释吗？保持注释左对齐并允许它们换行到下一行，提高了最终用户的清晰度和可读性。会喜欢一些反馈！

.content {
      margin: 50px auto;
    }
    .has-annotation {
      position: relative;
      display: inline-block;
    }
    
    .annotation {
      position: absolute;
      bottom: 20px;
      font-style: italic;
    }
    
    #a { color: red; }
    #b { color: green; }
    #c { color: blue; }
    #d { color: orange; }

<div class="content">
      <div class="has-annotation" id="a">
        <span class="annotation">nope</span>
        It's a bird, 
      </div>
      <div class="has-annotation" id="b">
        <span class="annotation">you may be right</span>
        it's a plane, 
      </div>
      <div class="has-annotation" id="c">
        <span class="annotation">yeah!</span>
        it's Superman! 
      </div>
      <div class="has-annotation" id="d">
        <span class="annotation">muahaha</span>
        Go get the Kryptonite
      </div>
    </div>

Answer 7

我已将annotation类从div更改为span并嵌入content div中。

http://jsbin.com/qejemeredi/2/

 .item {
  margin-top: 20px;
}

.content {
  float: left;
margin-right:-25px;
}
.annotation {
  margin-top: -25px;
  font-style: italic;
   float: left;
  white-space: pre;

}



td:first-child {
  color: red;
}
td:nth-child(2) {
  color: green
}
td:nth-child(3) {
  color: blue;
}
td:nth-child(4) {
  color: orange;
}

HTML

<div class='item' style='color: red'>

  <div class='content'><span class='annotation'>nope</span> It's a bird,     </div>
</div>

 <div class='item' style='color: green'>

  <div class='content'>
    <span class='annotation'>you may be rightsdfdsg</span>
    it's a plane, </div>
</div>
<div class='item' style='color: blue'>

  <div class='content'><span class='annotation'>yeah!</span>it's Superman! </div>
</div>
<div class='item' style='color: orange'>

  <div class='content'><span class='annotation'>muahaha</span>
    Go get the Kryptonite</div>
</div>

Answer 8

您可能希望遵循以下规则：

＆＃13;

＆＃13;

.item {
  float: left;
  width: calc(100% - 20px);
}
.annotation {
  font-style: italic;
}
.content,
.annotation {
  display: inline-flex;
  float: left;
  min-width: 60px;
  padding: 5px;
  text-align: left;
  white-space: nowrap;
}
h3 {
  clear: both;
  margin: 0;
  padding: 20px 0;
}

＆＃13;

<h3>example1</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='annotation'>you may be right</div>
  <div class='annotation'>yeah!</div>
  <div class='annotation'>muahaha</div>

</div>
<div class='item' style='color: green'>
  <div class='content'>It's a bird,</div>
  <div class='content'>it's a plane,</div>
  <div class='content'>it's Superman!</div>
  <div class='content'>Go get the Kryptonite</div>
</div>
<h3>Example 2</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='annotation'>Still no</div>
  <div class='annotation'>yeah!</div>
  <div class='annotation'>muahaha</div>

</div>
<div class='item' style='color: green'>
  <div class='content'>It's a bird,</div>
  <div class='content'>it's a plane,</div>
  <div class='content'>it's Superman!</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

＆＃13;

＆＃13;

＆＃13;