Html Webkit字幕仅在必要时滚动

我有一个关于webkit marquee的问题。我有两个可变宽度的元素。（这两个元素的宽度相同），并且两个元素都需要是一个选框

但是，当内容溢出（大于元素）时，我需要一个字幕，如果没有，文本应该保持原样（没有滚动）

我创建了一个JSFIDLE作为示例： :

长的和短的都需要通过CSS3选框，而长的应该滚动，短的不滚动

<p class="long">Hi my name is John Doe</p>
<p class="short">Yeah!</p>

你好，我叫约翰·多伊

是啊

记住，元素的内容是可变的（用javascript填充），所以我不能对元素的选框行为进行实际的硬编码

这里的CSS专家能帮我吗？我已经对此进行了很多研究，但是关于这个主题的信息很少，因为它是相对较新的

---

我现在能想到的唯一解决方案是使用jQuery来测量元素的宽度，然后计算它们是否需要额外的间距。如果他们需要使用字幕，其他人不需要。但这对我来说似乎不是很清楚，我宁愿在可能的情况下使用HTML/CSS来完成这项工作。

这可能并不完全符合您的要求，但这是一个值得注意的问题：

它使用CSS动画来设置transform:translateX百分比的动画，因为这是基于元素本身的宽度。这意味着我们可以向左滚动一个元素的全宽。通过给选框一个最小宽度，我们可以标准化较短的文本长度。然后我们使用calc（100%+100px）将项目100%向左移动，旋转木马的宽度除外（100px）

它没有完全滚动文本时的传统选框感觉，但使用动画关键帧可以在文本末尾暂停，以便用户有时间阅读

p {
  height: 30px;
  width: 100px;
  background-color: #CCC;
  white-space: nowrap;
}

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee__content {
  padding: 5px 0;
  margin-right: 100px;
  position: absolute;
  height: 20px;
  animation: scroller 3s linear infinite;
  min-width: 100px; /* This needs to match the width of the parent */
}

@keyframes scroller {
 0% {
     transform: translateX(0%);
 }

 /* ‘pauses’ the scroller at the start for 20% of the time, adjust to edit timing */
 20% {
   transform: translateX(0%);
 }

  /* ‘pauses’ the scroller at the end for 20% of the time */
  80% {
    /* Translate will use the width of the element so 100% scrolls it’s full length. add the width of the marquee to stop smaller items scrolling */
   transform: translateX(calc(-100% + 100px)); 
  }

  100% {
   transform: translateX(calc(-100% + 100px));
  }
}


<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>
<p class="marquee"><span class="marquee__content">Yeah!</span></p>

p{
高度：30px；
宽度：100px；
背景色：#CCC；
空白：nowrap；
}
马奎尔先生{
溢出：隐藏；
位置：相对位置；
}
.字幕内容{
填充：5px0；
右边距：100px；
位置：绝对位置；
高度：20px；
动画：滚动3s线性无限；
最小宽度：100px；/*这需要匹配父级的宽度*/
}
@关键帧滚动条{
0% {
转化：translateX（0%）；
}
/*将滚动条在开始时“暂停”20%的时间，调整以编辑计时*/
20% {
转化：translateX（0%）；
}
/*将滚动条在末尾“暂停”20%的时间*/
80% {
/*Translate将使用元素的宽度，以便100%滚动整个长度。添加选框的宽度以停止较小的项目滚动*/
转换：translateX（计算（-100%+100px））；
}
100% {
转换：translateX（计算（-100%+100px））；
}
}
你好，我叫约翰·多伊

是啊

令人钦佩的是，您只想用CSS解决这一问题，但有时您必须划清界限。在这种情况下，我强烈建议您找到另一种解决方案，因为对于您来说，它是一种新的属性，但更重要的是，目前它是一种，而且只是一种。编辑：我现在才看到这个问题已经有四年了。哇，你不能只靠CSS来处理它。您必须使用javascript或JQuery来解决它。