尝试将跨度的大小设置为内容大小的百分比 [英] Trying to set the size of a span as a percentage of size of contents

问题描述

我想我有什么听起来像一个简单的请求，但可能实际上很难做，但我没有在HTML中工作很长时间。

首先，我只需要支持IE。我理解WebKit是经常的，但直到有一个WebKit浏览器内置到Windows Phone 7中，我被限制在IE。

我有一个文本，我想要在水平方向上进出动画。我真的不想提前测量它的国际化原因。我想做的是能够设置如下：

 < span id =parentstyle = width：50％of child's size> 
< span id =child>你好，残酷的世界< / span> 
< / span> 
  

看起来像

<$ p $任何方式可以实现这一点？

解决方案

Span没有孩子，David说，你还要做的是将span设置为一个块（ ：block ）和50％，它将占用父级的50％的宽度（如果这是你的意思），然后做 overflow：hidden

- UPDATE 2 -

这里是原始JS。如果您有任何问题，请与我们联系。这做同样的事情，我在jQuery，但只有JS。

  //设置vars 
 $ = document ; 
 $ parent = $ .getElementById（'parent'）; 
 $ child = $ .getElementById（'child'）; 
 
 //设置子元素的样式
 $ child.style.width = $ child.offsetWidth +'px'
 $ child.style.display ='block'; 
 
 //设置父类的样式
 $ parent.style.width =（$ child.offsetWidth * 0.5）+'px'
 $ parent.style.overflow = '隐'; 
 $ parent.style.display ='block'; 
  

I think I've got what sounds like a simple request but is probably actually stupid hard to do, but I haven't worked in HTML in a long time.

First, I only have to support IE. I understand WebKit is often, but until there's a WebKit browser built into Windows Phone 7, I'm limited to IE.

I've got a piece of text that I want to animate in and out horizontally. I really don't want to measure it ahead of time for internationalization reasons. What I'd love to do is be able to set something like this:

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

And have it look like

Hello, cru

Any way to accomplish this?

解决方案

Span has no child as David said, also, all you have to do is set span to a block (display:block) and 50% and it'll take the width of 50% of the parent (if thats what you mean) and then do overflow:hidden which will snip it off at 50% and wont show the rest of whats inside.

-- UPDATE 2 --

Here is the raw JS. Let me know if you have any questions. This does the same thing as i had in jQuery, but with just JS. plop it in a script tag and you should be good to go.

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

这篇关于尝试将跨度的大小设置为内容大小的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！