從html按鈕中溢出的文本看起來與應用樣式相反

我只是不知道爲什麼此按鈕中的文本未包裝到下一行。相反，它最終會被切斷。這裏是造型：從html按鈕中溢出的文本看起來與應用樣式相反

#find-attach-all-content-container input[type="button"] { 
    width: 60px; 
    height: 60px; 
    background-color: #fd902a; 
    color: #fff; 
    padding: 5px; 
    position: absolute; 
    left: -10px; 
    top: -20px; 
    font-size: 14px; 
    line-height: 15px; 
    overflow: visible; 
    text-align: center; 
    border: solid #b6b6b6 1px; 
}

下面是HTML：

<input type="button" class="attach-btn" value="Attach to Response" onclick="postConditionFindCure(<?php echo get_the_ID() ?>);">

來源

2014-09-11 bob

我要補充一點，換行：正常也沒有幫助。 – bob 2014-09-11 12:53:59

請閱讀我的答案，它會工作:) – Jay 2014-09-11 12:56:41

您應該添加：

white-space: normal;

爲white-space的默認值被設置爲不換行輸入元素。

來源

2014-09-11 12:54:30 Tomas

解答作品，謝謝！我會盡可能接受。 – bob 2014-09-11 12:56:57

有趣，我一直認爲，這是不可能的！ – dfsq 2014-09-11 12:57:23

在這裏工作：http://jsfiddle.net/23x3pL9f/1/ – 2014-09-11 12:58:55

-1

可以使用回車字符打破行：

<input type="button" value="Really&#x00A;Tall&#x00A; Button">

來源

2014-09-11 12:56:10 Jay

是的，它確實....嘗試它 – Jay 2014-09-11 12:59:21

http://jsfiddle.net/MelanciaUK/23x3pL9f/3/ – melancia 2014-09-11 13:00:56

高度將根據您打破文本的行數。不建設性。 – Jay 2014-09-11 13:01:50

overflow: visible將與文字工作只是如果容器元素沒有定義的靜態height。

此外，您需要覆蓋默認值white-space，將其設置爲normal，否則文本將包裝在其容器元素的末尾。

那麼，你就需要通過刪除height並設置white-space改變你的風格：

#find-attach-all-content-container input[type="button"] { 
    width: 60px; 
    /* height: 60px; */ 
    background-color: #fd902a; 
    color: #fff; 
    padding: 5px; 
    position: absolute; 
    left: -10px; 
    top: -20px; 
    font-size: 14px; 
    line-height: 15px; 
    overflow: visible; 
    text-align: center; 
    border: solid #b6b6b6 1px; 
    /* Added */ 
    white-space: normal; 
}

2014-09-11 13:33:26 melancia

從html按鈕中溢出的文本看起來與應用樣式相反

回答

相關問題