文本溢出时选取文本答案

【问题标题】：Marquee Text When Text Overflows文本溢出时选取文本
【发布时间】：2009-05-07 16:22:30
【问题描述】：

这就是我的问题。假设我有 3 个 div 标签，都是 100 像素宽：

<--- DIV WIDTH --->
Text in div 1
Text in div two, it overflows
Text in div three
<--- DIV WIDTH --->

现在，我有这个用于 div 的 CSS：

width:100px;
overflow:hidden;

我想要做的是，如果文本溢出，它会像选框一样滚动，所以如果你稍等一下，所有的文本都可以看到。但我只希望字幕显示文本是否溢出。

我该怎么做？

谢谢，托尼

【问题讨论】：

标签： javascript jquery html css marquee

【解决方案1】：

解决条件部分

JS

var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
    // Your marquee code here
}

【讨论】：

为了它的价值，我不得不使用 .outerWidth() 而不是 width()。

【解决方案2】：

$(function(){
  $box = $('div.box');
  $box.children().each(function(){
    if ($box.width() < $(this).width()) {
      $(this).wrap('<marquee>');
    }
  )};
});

可以在 jQuery 中使用（我还没有检查过。如果您对它有任何问题，请回复）。或者，您可以在 css 中设置滚动属性。

【讨论】：

选框是obsolete。当你在这里所做的只是将一些元素包装在标签内时，为什么要在这里提出 jQuery？可以在代码中完成，不是吗？！

【解决方案3】：

条件部分可以像rennat建议的那样轻松解决。

你可以使用 jQuery 吗？如果是，请构建与jQuery marquee plugin 兼容的 html，然后调用 $(element).marquee();为动画。它比'<marquee>'标签更好，因为它只使用具有适当css属性的div（避免使用非标准标签）。

【讨论】：

【解决方案4】：

这不适用于您所描述的问题（div 中的纯文本），但如果这只是最小的情况，您可以使用overflow: auto，如果溢出，它将添加一个水平滚动条。

（还要注意，marquee 是一个非标准的 HTML 标记。）

【讨论】：