试图设置一个跨度的大小作为内容大小的百分比

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％，并且不会显示其余内容。

- UPDATE 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';