Question

I would like to be able to remove the “space” at the top and the bottom of a text inside of a container.

The div must be as close as possible to the text inside.
This text is the result of a input and can be changed by the user.

I guess that I should work with the line-height, but how?

Any advice would be greatly appreciated!

Answer 1

As explained in the title, I needed to “dynamically” remove the space around text.
In fact, every fonts have different structure and don’t render in the same way on every browser…

I found a compromise for this :

.text { line-height: 70% }

As explained here, if we use a percentage, we could apply any font-size to our text, the line-height will always be the same.

I can change the font-size with jQuery, the line-height will always be properly applied to the text and to the surrounding element.

I dealt with a case function for every font to apply a different line-height. In my case, this is a working solution…

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

Note that the user can also change the font-size with another select element…

Hope this could help…