Попытка установить размер диапазона в процентах от размера содержимого

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