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

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

正如大卫所说，Span 没有孩子，而且，你所要做的就是将 span 设置为一个块 (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';