Jquery 不带空白的货币报价器

我想创建一个货币代码。一个查询从yahoo Finance API检索值并将其显示为文本。主要问题是文本末尾的空白。字幕脚本解决了空白问题。setInterval会中断移动的文本，因为它是从开头开始的

$document.readyfunction{ //股票价格； setIntervalStockPriceTicker，5000； }; 功能股票报价器{ 变量符号=， CompName=， 价格=， ChnageInPrice=， 百分比技术价格=； 变量CNames=^FTSE、HSBA.L、SL.L、BATS.L、BLND.L、FLG.L、RBS.L、RMG.L、VOD.L； var flickeAPI=http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20%22+CNames+%22&env=store://datatables.org/alltableswithkeys; var StockTickerHTML=； var StockTickerXML=$.getflickerAPI，functionxml{ $xml.findquote.eachfunction{ Symbol=$this.attrsmbol； $this.findName.eachfunction{ CompName=$this.text； }; $this.findLastTradePriceOnly.eachfunction{ 价格=$this.text； }; $this.findChange.eachfunction{ ChnageInPrice=$this.text； }; $this.findPercentChange.eachfunction{ PercentChnageInPrice=$this.text； }; StockTickerHTML+=+CompName++Price+； }; $.marquee div.htmlStockTickerHTML； //$dvStockTicker.jStockTicker{间隔：30，速度：2}； }; } 身体{ 利润率：20px； } 马奎尔先生{ 高度：25px； 宽度：420px； 溢出：隐藏； 位置：相对位置； } .字幕组{ 显示：块； 宽度：200%； 高度：30px； 位置：绝对位置； 溢出：隐藏； 动画：字幕5s线性无限； } .帐篷跨度{ 浮动：左； 宽度：50%； } @关键帧选框{ 0% { 左：0； } 100% { 左-100%； } }

---

问题是您给了跨度一个固定的宽度，如果文本较小，则每个文本的末尾都会有一个很大的空白，因此通过调整.marquee-span规则（如下所示），可以解决该问题

.marquee span {
    display: inline-block;
}
.marquee span ~ span::before {
    content:'|';
    color: red;
    padding: 0 5px
}

文本中断是由.marquee div上的固定宽度引起的，因此我也对该div进行了一些调整

.marquee div {
    display: inline-block;
    padding-left: 100%;          /*  start from right, can be removed  */
    animation: marquee 25s linear 2s infinite;
}

示例代码段

$document.readyfunction{ //股票价格； setIntervalStockPriceTicker，1000； }; 功能股票报价器{ var Symbol=，CompName=，Price=，ChnageInPrice=，PercentChnageInPrice=； 变量CNames=^FTSE、HSBA.L、SL.L、BATS.L、BLND.L、FLG.L、RBS.L、RMG.L、VOD.L； var flickeAPI=http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20%22+CNames+%22&env=store://datatables.org/alltableswithkeys; var StockTickerHTML=； var StockTickerXML=$.getflickerAPI，functionxml{ $xml.findquote.eachfunction{ Symbol=$this.attrsmbol； $this.findName.eachfunction{ CompName=$this.text； }; $this.findLastTradePriceOnly.eachfunction{ 价格=$this.text； }; $this.findChange.eachfunction{ ChnageInPrice=$this.text； }; $this.findPercentChange.eachfunction{ PercentChnageInPrice=$this.text； }; StockTickerHTML+=+CompName++Price+； }; $.marquee div.htmlStockTickerHTML； //$dvStockTicker.jStockTicker{间隔：30，速度：2}； }; } 正文{页边距：20px；} 马奎尔先生{ 保证金：0自动； 空白：nowrap； 溢出：隐藏； 框大小：边框框； 边框：1px绿色实心； } .帐篷跨度{ 显示：内联块； } .marquee span~span:：before{ 内容：“*”； 填充：0 25px； } .字幕组{ 显示：内联块； 左：100%； 动画：字幕12s线性1s无限； } @关键帧选框{ 0%{转换：translate0，0；} 100%{transform:translate-100%，0；} }

---

没有实际运行的东西是很困难的，尽管我立即做出反应的是.marquee span{float:left；width:50%；}。删除宽度：50%或将其更改为。选框span{display:inline block；}可能会解决您的问题，因为这样做会使跨度调整到其内容。我知道我尝试了很多次，但运气不佳。我希望有人能帮上忙。您能告诉我a给出的答案有什么不起作用吗，所以我可以调整，你可以接受吗？好的，你可以注意到有东西打断了文本的平滑滚动。@Mariosnikolau更新了我的回答

---

k谢谢你的帮助，如果你注意到文本末尾有空格，我如何删除它？@MariosNikolaou添加了一个2:nd示例，这一个是否如预期的那样工作？选框宽度应该是100%，我测试了它，它太慢了