草庐IT

html - Webkit 选取框仅在必要时滚动

coder 2023-08-12 原文

我有一个关于 webkit marquee 的问题。我有 2 个可变宽度的元素。 (2 个元素的宽度相同)，并且两个元素都需要是跑马灯。

但是，当内容溢出(大于元素)时，我需要一个选取框，否则文本应保持原样(不滚动)。

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

长的和短的都需要通过 CSS3 进行选取框，而长的应该滚动而短的则不需要。

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

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

这里有 CSS 专家可以帮助我吗？我一直在研究这个问题，但是关于这个主题的信息很少，因为它相对较新。

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

最佳答案

这可能不完全符合您的要求，但这是一个值得关注的好问题:http://jsfiddle.net/4hgd8ac1/

它使用 CSS 动画来动画转换: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>

关于html - Webkit 选取框仅在必要时滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15115697/

Webkithtmlsectionmarqueethecss

有关html - Webkit 选取框仅在必要时滚动的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - Capybara-webkit 引发 Capybara::Driver::Webkit::WebkitInvalidResponseError - 2

    我在rspec中收到来自webkit驱动程序的以下消息:Capybara::Driver::Webkit::WebkitInvalidResponseError:UnabletoloadURL:http://127.0.0.1:44923/posts几天前它成功了。问题出在save_page方法上。有什么问题吗？ 最佳答案 当我的页面出现错误时，我收到过类似的错误消息。您应该通过在测试模式下启动服务器(railss-etest)并自行访问页面来手动检查情况是否如此。 关于ruby-on-

  6. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  7. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  8. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  9. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  10. ruby-on-rails - NameError(未初始化常量 Unzipper::Zip)但仅在 Heroku 部署(Rails)上 - 2

    我有一个类unzipper.rb，它使用Rubyzip解压文件。在我的本地环境中，我可以成功解压缩文件，而无需使用require'zip'明确包含依赖项但是在Heroku上，我得到一个NameError(uninitializedconstantUnzipper::Zip)我只能通过使用明确的require来解决问题:为什么这在H​​eroku环境中是必需的，但在本地主机上却不是？我的印象是Rails自动需要所有gem。app/services/unzipper.rbrequire'zip'#OnlyrequiredforHeroku.Workslocallywithout!class

随机推荐