Question

我正在尝试使用跨度来填充文本。

init()
function init() {
  targetElement = $('#q1').get(0);
  MaxScroll = false;
  targetElement.scrollLeft = PreviousScroll  = 0;

  ScrollInterval = setInterval('animatethis()', 5);
}

function animatethis() {
  if (!MaxScroll) {
    targetElement.scrollLeft = PreviousScroll;
    PreviousScroll++;
    MaxScroll = targetElement.scrollLeft >= (targetElement.scrollWidth - targetElement.clientWidth);
  }
  else {
    MaxScroll = (targetElement.scrollLeft == 0)?false:true;
    targetElement.scrollLeft = PreviousScroll;
    PreviousScroll--;
  }
}

$('#q1').mousedown(function() {
  clearInterval(ScrollInterval);
});

$('#q1').mouseup(function() {
  ScrollInterval = setInterval('animatethis()', 5);
});

targetElement.addEventListener('touchstart', function(e){
  e.preventDefault()
  clearInterval(ScrollInterval);
}, false)
     
targetElement.addEventListener('touchend', function(e){
  e.preventDefault()
  ScrollInterval = setInterval('animatethis()', 5);
}, false)

.jdName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

这里<td> <span className="jdName">Some Name with more characters</span> </td>的宽度今天固定。因此，我没有给出范围。

但这并没有显示出任何省略。

我必须为此使用div。谁能帮我如何使用span而不是div？

Answer 1

这里有两个因素在起作用。首先，<span>具有内联布局；某些CSS属性默认情况下不适用于它。其次，<td>的{{1}}有自己的一组布局怪癖。

通常，如果您为<table>提供块布局（将span设置为display，inline-block等）和宽度（几乎所有除 block之外，省略号会出现。

不过，

auto元素是特殊情况。并且那个在SO问题td widths, not working?中得到了更好的解释。

<td>

td,
.test-div {
  width: 100px;
}

.jdName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  border: 1px solid red;
}

使用跨度显示椭圆而不是div

1 个答案: