html - 将文本与底部对齐并强制 overflow hidden

Question

我想要一个固定高度的文本框，其中文本底部对齐。如果文本超过框的高度，则文本将不可见。我现在的问题是 overflow:hidden;不隐藏额外的文本。我认为这是因为display:table-cell; 。如果我删除 display:table-cell; overflow:hidden;会工作vertical-align:bottom;将不再起作用。

编辑:如果文本很长，则文本需要向上扩展直到达到 40px。当达到 40px 时，将不会通过 overflow:hidden; 渲染附加文本.

http://jsfiddle.net/LxtqJ/

div {
    background: yellow; 
    height: 40px;
    width: 250px;
    display: table-cell;
    vertical-align: bottom;
    overflow: hidden;
}

<div>
    <a href="#">A SHORT LINK WITH MY TEXT</a>
</div>

<br> 

<div>
    <a href="#">A VERY...VERY LONG LINK WITH MY TEXT</a>
</div>

Answer 1

您需要溢出的位置位于 <a>

a {
  display:inline-block;
}

http://codepen.io/anon/pen/GLidz (请参阅我对有关 display:table-XX; 的问题的评论)

如果这不完全是您所需要的，您可以将 max-height 或 height 设置为 <a>

a {
  display:inline-block;
  max-height:2.4em /* average 2 lines 1.2 X 2 */
  /* or max-height : height of cell ;*/
  overflow:hidden;
}

更多解释: table-cell 将保持垂直扩展，这就是它的工作原理。

1. 如果您设置 max-height:100%;给 child ，没有height为了 表格单元格，它会增长，它将 100% 未知。
2. 如果您将表格单元格的高度设置为 height:100px ，它会增长，但如果 children 有height或max-height例如:100% ，这将是 100px 的 100% 在 CSS 文件中设置。