Question

I have a div tag with a specific width that will receive a text through javascript.

<div id="titleTop" style="width:400px; height:25px; padding-top:15px;"></div>

And whenever the length of that text exceeds the width, the div should adjust its padding, so the 2nd line of the text isn’t obscured by the other div positioned below.

if(document.getElementById("titleTop").innerHTML.length >= 70){

    document.getElementById("titleTop").style.paddingTop = 5 + "px";
    document.getElementById("titleTop").style.height = 35 + "px";
}

My problem is this method isn’t very reliable. Is there any way to detect if the text triggered multiple lines inside the div? Or to have the padding adjust itself proportionately?

EDIT: Just to make things clear, my problem isn’t with the height of the div (it has to stay 40px high at all times), but with aligning the text vertically within it

Answer 1

.yourDivClass {
    display: table-cell;
    vertical-align: middle;    
}

That should align your content. Finally, eliminate extraneous CSS and your JavaScript function to keep your code as simple as possible.