1. 首頁
  2. 問答
  3. 如何動態刪除文本週圍的空間？

如何動態刪除文本週圍的空間？

2012-12-06 40 views
0

我希望能夠刪除容器內部文本頂部和底部的「空間」。如何動態刪除文本週圍的空間？

enter image description here

在div必須儘可能靠近裏面的文字。 此文本是輸入的結果，可由用戶更改。

我想我應該與行高一起工作，但怎麼做？

任何意見將不勝感激！

來源

2012-12-06 roastedtoast

+1

你有沒有設置填充到容器'div'？如果你有，然後刪除它，你的文本是什麼類型的元素，它是一個'span'或'p'等。從這個元素中刪除邊距。 –

+1

這與jQuery無關。 –

+0

這是因爲我必須用js（jQuery）更新字體大小。我將僅僅使用給定的解決方案。感謝您的答案！ – roastedtoast

回答

1

如在標題解釋的，我需要 「動態」 刪除文本週圍的空間。 其實，每個字體有不同的結構，並在每個瀏覽器同樣的方式不會使...

我發現這是一個妥協：

.text { line-height: 70% }

至於解釋here，如果我們使用百分比，我們可以將任何字體大小應用於我們的文本，行高將始終相同。

我可以改變字體大小與jQuery，線高度將總是被正確應用於文本和周圍元件。

我處理了每種字體的case函數來應用不同的行高。在我的情況下，這是一個工作解決方案...

var fontFamily = $("input").val(); // Here, the font-Size is defined dynamically by the user... It could be Arial, Verdana, Comic etc... 
var lineHeight; 

switch (fontFamily){ 

    case "Arial Black": // if the user has selected the arial black font... 
     lineHeight = "70%"; // we define a line-height that will be correctly applied to the text 
     break; 
    case "Verdana": 
     lineHeight = "78%"; 
     break; 
    default: 
     lineHeight = "66%"; 

} 

$(".text").css("line-height", lineHeight); // we apply the line-height to the text...

需要注意的是，用戶還可以用另一種選擇元素改變字體大小...

希望能幫助...

來源

2012-12-06 19:58:46 roastedtoast

2

使用CSS padding屬性元素的邊框內設置空間：

padding:0;

此外作爲Terric指出，如果孩子有一個保證金，將其刪除：

margin:0;

來源

2012-12-06 10:29:55

+0

在我的情況下，邊距和填充沒有任何幫助。我不得不處理行高來解決這個問題。 – roastedtoast

6

用於line-height

.some_css{ 
line-height: px; // according to your text size of design 
}

來源

2012-12-06 10:29:59

+0

這是正確的答案。 –

+0

在我的情況下，單詞的字體大小可以由用戶更改。所以當字體大小發生變化時，我必須得到一個新的行高值，我該怎麼做？ – roastedtoast

2

您可以使用padding: 0'或嘗試

  1. 什麼填充做

enter image description here

零填充

enter image description here

  • 和線高度

    • enter image description here

    來源

    2012-12-06 10:37:28

    +0

    在我的情況下，問題是行高。我注意到這個參數與字體大小和字體本身有關。 看看我的答案，瞭解我是如何解決問題的。 感謝您的幫助！ – roastedtoast

    相關問題

     相關問題