3

我有一个特定宽度的 div 标签，它将通过 javascript 接收文本。

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

并且每当该文本的长度超过宽度时，div 应该调整其填充，因此文本的第二行不会被位于下方的另一个 div 遮挡。

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

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

我的问题是这种方法不是很可靠。有什么方法可以检测文本是否触发了 div 内的多行？或者让填充按比例调整自己？

编辑：为了清楚起见，我的问题不在于 div 的高度（它必须始终保持 40px 高），而是在其中垂直对齐文本

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

不需要JS。删除填充顶部，设置高度和使用vertical-align:middle;，display:table-cell; 这是一个工作小提琴

于 2012-11-30T12:31:33.953 回答
0

但在其中垂直对齐文本

如果要在<div>特定高度内垂直居中对齐文本，请将 CSS 属性设置为与（跨浏览器）的属性line-height相同的值。height<div>

于 2012-11-30T14:53:26.203 回答