Webkit选框只在必要时滚动

Question

我有一个关于webkit选框的问题.我有2个可变宽度的元素.(2个元素的宽度相同),两个元素都需要是一个选框.

但是当内容溢出(比元素大)时,我需要一个选取框,如果不是,文本应保持原样(不滚动).

我创建了一个JSFiddle作为示例: http://jsfiddle.net/Vxwed/:

长和短都需要通过CSS3进行选取,而long应该滚动而短的不应该.

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

请记住,元素的内容是可变的(用javascript填充),所以我不能对元素marquee-behavior进行实际的硬编码.

这里的任何CSS专家都能帮到我吗？我一直在研究这个问题,但关于这个问题的信息很少,因为它相对较新.

我现在能够想到的唯一解决方案是使用jQuery来测量元素的宽度,然后计算它们是否需要额外的间距.如果他们需要应用选框,否则不要.但这对我来说似乎不太干净,我宁愿在可能的情况下在HTML/CSS中这样做.

Answer 1

这可能不\xe2\x80\x99t 完全按照你想要的方式做，但这是一个很好看的问题：http ://jsfiddle.net/4hgd8ac1/

\n\n

它使用 CSS 动画来动画转换：translateX 百分比，因为它基于元素本身的宽度。这意味着我们可以向左滚动元素 it\xe2\x80\x99s 全宽度。通过给选框指定最小宽度，我们可以标准化较短的文本长度。然后我们使用 calc(100% + 100px) 将项目向左移动 100%，除了轮播的宽度 (100px) 之外。

\n\n

它并不具有传统的字幕感觉，文本完全滚动，但使用动画关键帧，可以在文本末尾暂停，让用户有时间阅读。

\n\n

p {\n  height: 30px;\n  width: 100px;\n  background-color: #CCC;\n  white-space: nowrap;\n}\n\n.marquee {\n  overflow: hidden;\n  position: relative;\n}\n\n.marquee__content {\n  padding: 5px 0;\n  margin-right: 100px;\n  position: absolute;\n  height: 20px;\n  animation: scroller 3s linear infinite;\n  min-width: 100px; /* This needs to match the width of the parent */\n}\n\n@keyframes scroller {\n 0% {\n     transform: translateX(0%);\n }\n\n /* \xe2\x80\x98pauses\xe2\x80\x99 the scroller at the start for 20% of the time, adjust to edit timing */\n 20% {\n   transform: translateX(0%);\n }\n\n  /* \xe2\x80\x98pauses\xe2\x80\x99 the scroller at the end for 20% of the time */\n  80% {\n    /* Translate will use the width of the element so 100% scrolls it\xe2\x80\x99s full length. add the width of the marquee to stop smaller items scrolling */\n   transform: translateX(calc(-100% + 100px)); \n  }\n\n  100% {\n   transform: translateX(calc(-100% + 100px));\n  }\n}\n\n\n<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>\n<p class="marquee"><span class="marquee__content">Yeah!</span></p>\n

\n