3

javascript を介してテキストを受け取る特定の幅の div タグがあります。

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

そのテキストの長さが幅を超えるときはいつでも、div はそのパディングを調整する必要があるため、テキストの 2 行目は下に配置された他の div によって隠されません。

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

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

私の問題は、この方法があまり信頼できないことです。テキストが div 内で複数の行をトリガーしたかどうかを検出する方法はありますか? または、パディングが比例して調整されるようにしますか?

編集: 明確にするために、私の問題は div の高さ (常に 40 ピクセルの高さを維持する必要があります) ではなく、その中でテキストを垂直方向に配置することです

4

4 に答える 4

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

これにより、コンテンツが整列するはずです。最後に、不要な CSS と JavaScript 関数を削除して、コードをできるだけシンプルに保ちます。

于 2012-11-30T12:10:22.840 に答える
0

div垂直方向に中央揃えのテキストで高さを固定するには、 からパディングを削除しdiv、次を使用します。

style="vertical-align:middle; display:table-cell;"

これにより、テキストが垂直方向に中央揃えになります。JavaScript はもう必要ありません。

于 2012-11-30T12:23:56.167 に答える
0

ただし、テキストをその中に垂直に配置します

特定の高さの内でテキストを垂直方向に中央揃えにする場合は<div>、CSS プロパティを(クロスブラウザ)のプロパティline-heightと同じ値に設定します。height<div>

于 2012-11-30T14:53:26.203 に答える
0

JSは必要ありません。padding-top を削除し、高さを設定して使用するvertical-align:middle;と、display:table-cell; ここに作業フィドルがあります

于 2012-11-30T12:31:33.953 に答える