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 （请参阅我对有关显示的问题的评论：table-XX;）

如果这不完全符合您的需要，您可以将最大高度或高度设置为<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将保持垂直扩展，这就是它的工作原理。

如果您将max-height:100%;设置为子级，而不是height 表格单元格，它将增长它将是未知的100％。
如果您将高度设置为像height:100px这样的表格单元格，它会增长，但是如果孩子有height或max-height喜欢：100%，这将是100px的100％在CSS文件中设置。

Answer 2

HTML中的

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

<br> 

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

在CSS中

.outside {
    background: yellow; 
    height: 40px;
    width: 250px;
    overflow: hidden;
}

.insideside {
    height: 40px;
    display: table-cell;
    vertical-align: bottom;
}

希望这会对你有帮助......

您可以在不编辑HTML代码的情况下执行相同的操作

HTML：相同的HTML代码

CSS：喜欢这个

div {
background: yellow;
height: 40px;
width: 250px;
overflow: hidden;
}

a {
display: table-cell;
height: 40px;
vertical-align: bottom;
}

也许这会解决你的问题...

Answer 3

这有效：

div {
    background: yellow; 
    height: 40px;
    width: 250px;
    overflow: hidden;
    position: relative;
}
div a{
    position: absolute;
    bottom: 0;
}

将文本与底部对齐并强制执行溢出隐藏

3 个答案: