如何动态删除文本周围的空间？答案

【问题标题】：How to dynamically remove space around text?如何动态删除文本周围的空间？
【发布时间】：2012-11-24 08:43:08
【问题描述】：

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

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

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

任何建议将不胜感激！

【问题讨论】：

您是否为容器div 设置了填充？如果你有，然后删除它，还有什么类型的元素是你的文本是 span 或 p 等。从这个元素中删除边距。
这与 jQuery 无关。
是的，因为我必须用 js(jQuery) 更新字体大小。我将只应用给定的解决方案。感谢您的回答！

标签： css text

【解决方案1】：

使用 CSS padding 属性设置元素边框内的空间：

padding:0;

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

margin:0;

【讨论】：

边距和填充在我的情况下根本没有帮助。我不得不处理 line-height 来解决这个问题。

【解决方案2】：

曾经line-height

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

【讨论】：

在我的例子中，用户可以更改单词的字体大小。因此，当字体大小发生变化时，我必须为 line-height 获取一个新值，我该怎么做？

【解决方案3】：

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

填充是做什么的

零填充

和行高

【讨论】：

就我而言，问题是行高。我注意到这个参数与字体大小和字体本身有关。看看我的回答，了解我是如何解决这个问题的。感谢您的帮助！

【解决方案4】：

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

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

.text { line-height: 70% }

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

我可以使用 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...

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

希望这可以帮助...

【讨论】：