試圖設置一個跨度的大小作爲內容大小的百分比

我想我聽起來像一個簡單的請求，但可能實際上很愚蠢難，但我沒有在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

任何方式做到這一點？

來源

2010-11-19 Hounshell

你知道'span'有* no * child嗎？ – 2010-11-19 22:31:51

是不是文字「你好，殘酷的世界」的孩子呢？ – Hounshell 2010-11-19 22:34:03

不，裏面的文字只是文字。孩子，父母，兄弟姐妹等參考HTML中的節點，而不是文本。例如，在JS中，如果你做了那個span的element.child，你會返回0. – 2010-11-19 22:37:09

大衛說，跨度沒有孩子，你所需要做的就是將跨度設置爲一個塊（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';

來源

2010-11-19 22:35:44

我正在尋找幾乎相反的。我希望它佔用兒童寬度的50％[無論你想調用它] – Hounshell 2010-11-19 22:37:51

你需要使用JS，但是你要調用的子元素==該元素的寬度。（最小的方式來舉一個例子是用jQuery，所以...）基本上你會做'$（this）.css（{width：（$（this）.width（）/ 0.5）+'px'}）'' 。然後，如果你設置它（在CSS中）顯示：block;並溢出：隱藏它會隱藏它。 – 2010-11-19 22:41:12

所以在上面編輯的例子？如果我想讓「父」跨度爲「子」跨度有效寬度的50％，我該怎麼辦？ – Hounshell 2010-11-19 22:49:51

試圖設置一個跨度的大小作爲內容大小的百分比

回答

相關問題