Question

我认为我听起来像是一个简单的请求，但实际上可能很难做到，但我很长时间没有使用HTML。

首先，我只需要支持IE。我经常理解WebKit，但是在Windows Phone 7内置了一个WebKit浏览器之前，我只限于IE。

我有一段文字，我想要水平地进出动画。出于国际化的原因，我真的不想提前衡量它。我喜欢做的是能够设置这样的东西：

<span id="parent" style="width: 50% of child's size">
  <span id="child">Hello, cruel world</span>
</span>

让它看起来像

Hello, cru

有什么方法可以实现这个目标吗？

Answer 1

跨度没有孩子，正如大卫所说的那样，你所要做的就是将跨度设置为一个块（display:block）和50％并且它将占据父母的50％的宽度（如果那样的话）你是什么意思）然后做overflow:hidden，它将以50％的价格将其剪掉，并且不会显示其余的内容。

- 更新2 -

这是原始的JS。如果您有任何疑问，请告诉我。这和我在jQuery中做的一样，但只有JS。把它放在脚本标签中，你应该好好去。

//Setting up vars
$ = document;
$parent = $.getElementById('parent');
$child = $.getElementById('child');

//Set the styles for the child
$child.style.width = $child.offsetWidth+'px'
$child.style.display = 'block';

//Set the styles for the parent
$parent.style.width = ($child.offsetWidth*0.5)+'px'
$parent.style.overflow = 'hidden';
$parent.style.display = 'block';

尝试将跨度的大小设置为内容大小的百分比

1 个答案: