在ie7中指定寬度的按鈕換行？

所以我有一個具有指定寬度的提交按鈕，包含的文本從別處拉入，它是動態的。問題是，在ie7中，文本沒有正確溢出並換行到第二行，它只是被遺忘而已！在ie7中指定寬度的按鈕換行？

這裏是html。

<input type="submit" value="<?php echo $dynamic_data ?>" class="custom-submit">

和css。

.custom-submit { 
    height: 76px; 
    white-space: normal; 
    width: 140px; 
}

我看到有人建議其他地方放置換行符到按鈕的文本，但作爲文本的長度是動態的，這不會爲我工作。

任何想法？

來源

2011-04-27 igneosaur

？如果您刪除寬度，它將容納所有文本。這將是一個長按鈕。 – Jaspero 2011-04-27 17:43:23

按鈕上有更多的樣式，我只列出了重要的位。它們必須是固定的寬度，因爲它們本質上是一個列表。 – igneosaur 2011-05-19 10:52:22

我有包含動態本地化字符串按鈕類似的問題。

最好的解決方案可能不會使用<button>標籤。您可以用<a>標籤替換它作爲按鈕樣式。 IE在這種情況下似乎處理好包裝。

在我的情況下，這不是一個簡單的選擇。所以我做了修補了IE渲染填充工具：你爲什麼要使用一個按鈕的寬度

http://jsfiddle.net/dmitrytorba/dZyzr/247/

var buttons = document.getElementsByTagName('button'); 
for(var j=0; j < buttons.length; j++) { 
    var button = buttons[j]; 
    var textNode = button; 
    while(textNode.children[0]) { 
     textNode = textNode.children[0]; 
    } 
    var text, words, numSplits; 
    var spacing = 0; 
      while(button.scrollWidth !== 0 && button.clientWidth !== 0 && 
        button.scrollWidth > button.clientWidth) { 
     if(!spacing) { 
      text = textNode.innerHTML; 
      words = text.split(' '); 
      numSplits = Math.ceil(button.scrollWidth/button.clientWidth); 
      spacing = Math.round((words.length)/numSplits); 
     } 
     for(var i = spacing; i < words.length; i+=spacing+1) { 
      words.splice(i , 0, '<br />'); 
     }   
     textNode.innerHTML = words.join(' '); 
     spacing--; 
     words = text.split(' '); 
    } 
}

來源

2012-02-14 18:35:17

好吧，看起來我已經得到了自己的答案，謝謝。我不記得我到底做了些什麼！ – igneosaur 2012-06-29 20:06:05

非常有幫助的答案！拯救了我的一天！ – MaVRoSCy 2013-04-15 08:27:08

-2

以下CSS選項添加到您的按鈕：

white-space: nowrap;

來源

2011-04-27 20:36:43

在ie7中指定寬度的按鈕換行？

回答

相關問題