Question

我有一个表格单元格，我需要将文本限制为最多两行我尝试通过放置一个高度有限的内部div来实现这一点：

div 
{ 
  border: 1px solid #EECCDD;  
  width: 100px;
  height: 40px; 
  overflow: hidden; 
}

<div>
   <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
<div>
   <p>bla bla bla bla</p>
</div>

但是，在这种情况下，只有一行文本的单元格不会垂直对齐中间。我知道有一些方法可以在div中垂直对齐文本，但是我发现的大多数文章看起来有点复杂和/或很糟糕（比如this one），感觉有点像矫枉过正。

有没有不同的方法来有效地限制单元格内的行数，或者以我的方式对齐文本的简单方法？

Answer 1

试试这个：

 div 
{ 
  border: 1px solid #EECCDD;  
  width: 100px;
  height: auto; 
  max-height: 40px;
  overflow: hidden; 
}

而不是：

 div 
{ 
  border: 1px solid #EECCDD;  
  width: 100px;
  height: 40px;
  overflow: hidden; 
}

Answer 2

你可以使用jQuery。例如：

<强> HTML

<div><span class="text">text goes here <br /></span></div>

<强>的jQuery

<script type="text/javascript">
$(function() {
    var div = $("div");
    var divText = $(".text");
    var divTextTop;
    divTextTop = ( div.height() / 2 ) - ( divText.height() / 2 );
    divText.css({
    'position' : 'relative',
    'top': divTextTop + 'px',
    'color': '#555'
    });
  });
</script>

我希望此代码可以帮助您进行垂直对齐;代码很简单。

限制表格单元格中的文本行数

2 个答案: