css - 如何动态删除文本周围的空间？

Question

我希望能够删除容器内文本顶部和底部的“空格”。

在此处输入图像描述

div 必须尽可能靠近里面的文字。此文本是输入的结果，可由用户更改。

我想我应该使用 line-height，但是如何？

任何建议将不胜感激！

score 6 · Accepted Answer

6

曾经line-height

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

于 2012-12-06T10:29:59.223 回答

score 2 · Accepted Answer

您可以使用padding: 0' 或尝试line-height:px

填充做什么

零填充

和线高

score 2 · Accepted Answer

使用 CSSpadding属性在元素的边界内设置空间：

padding:0;

此外，正如 Terric 所指出的，如果孩子有边距，请将其删除：

margin:0;

score 1 · Accepted Answer

如标题中所述，我需要“动态”删除文本周围的空间。事实上，每种字体都有不同的结构，并且不会在每个浏览器上以相同的方式呈现......

我为此找到了一个折衷方案：

.text { line-height: 70% }

正如这里所解释的，如果我们使用百分比，我们可以将任何字体大小应用于我们的文本，行高将始终相同。

我可以使用 jQuery 更改字体大小，行高将始终正确应用于文本和周围元素。

我为每种字体处理了一个大小写函数以应用不同的行高。就我而言，这是一个可行的解决方案...

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...

请注意，用户还可以使用另一个选择元素更改字体大小...

希望这可以帮助...

css - 如何动态删除文本周围的空间？

4 回答 4

Related