Javascript 选框不显示所有文本-在不同点截断

我的字幕似乎没有显示我放在div中的所有文本。它总是在某一点被切断。你知道我怎样才能让它显示所有的文字吗

这是我到目前为止的代码（演示在）

HTML

JS

$（函数（）{
var marquee=$（“#marquee”）；
css（{“溢出”：“隐藏”，“宽度”：“100%”）；
//用span换行“我的文本”（即不喜欢divs内联块）
大屏幕包装器（“”）；
css（{“宽度”：“50%”，“显示”：“内联块”，“文本对齐”：“中心”}）；
marquee.append（marquee.find（“span”）.clone（）；//现在有两个带有“我的文本”的span
大屏幕包装器（“”）；
marquee.find（“div”）.css（“宽度”、“200%”）；
var reset=函数（）{
$（this.css（“左边距”、“0%”）；
动画（{“左边距”：“-100%”，10000，“线性”，重置）；
};
重置调用（选框查找（“div”）；
});

您的原始代码假定

100%

宽度

（即

200%

宽度

内的

50%

）将容纳整个文本

我对它进行了修改，以实际计算字符串所需的宽度，然后使用它来制作动画

检查此修改版本：

i、 e:

工作小提琴：

首先要解决文本在某一点被剪切的问题，请将

空白：nowrap

应用于

div

：

marquee.wrapInner("<div>");
marquee.find("div").css({
    "width": "100%",
    "white-space": "nowrap"
});

这是行不通的，因为您所指的

100%

不是

div

本身或其内容的宽度，而是其容器的宽度。您需要这样做：

$(this).animate({ -$(this).find('span').width() + 'px' }, 10000, 'linear', reset);

---

这将移动

div

与其子

跨距之一的像素长度正好一致
如果更改div字幕的宽度，则问题将得到解决

css（{“溢出”：“隐藏”，“宽度”：“100%”）

在上面的代码中，如果我们将宽度100%更改为308%，那么它在FF、Chrome（最新版本）中可以正常工作，如果我们将宽度100%更改为325%，那么它在IE中也可以正常工作。

用div将maqrquee标记中的文本包装起来，并给它一个类名。最后，对该类使用填充。填充值取决于文本的字体大小

而不是使用此样式

div.maqquee_text{padding:10px;}

这对我来说很有用。
以下是一个基于techfoobar答案的答案，它不会为小字符串创建重复的跨度，并且无论文本长度如何，滚动速度都更均匀：


$（函数（）{
var marquee=$（“#marquee”）；
大屏幕包装器（“”）；
var w=选框.find（“span”）.width（）；
var w2=$（document.body）.width（）；
if（w
#字幕{
颜色：#000；
高度：16px；
垫底：5px；
}

他们来了
在chrome（最新版本）中效果很好。它可以工作-但是文本在某个点被截断。很抱歉，我无法使链接中的代码工作。它在我的jsp中呈现为普通文本。我是否遗漏了什么？先谢谢你
...
marquee.find("span").css({ ... }); 

// get the actual used width
var w = marquee.find("span").width();

...
var reset = function() {
    $(this).css("margin-left", "0");

    // use calculated width for animation.
    $(this).animate({ "margin-left": "-"+w+"px" }, 40000, 'linear', reset);

};

marquee.wrapInner("<div>");
marquee.find("div").css({
    "width": "100%",
    "white-space": "nowrap"
});

$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);

$(this).animate({ -$(this).find('span').width() + 'px' }, 10000, 'linear', reset);

<marquee behavior="alternate" direction="right">Here is marquee text</marquee>

<marquee behavior="alternate" direction="right"><div class="maqquee_text">Here is marquee text</div></marquee>

div.maqquee_text{padding:10px;}