Html 将文本与底部对齐并隐藏

我想有一个固定高度的文本框，文本在底部对齐。如果文本超过框的高度，则文本将不可见。我现在的问题是

溢出：隐藏未隐藏额外的文本。我认为这是因为
显示：表格单元格。如果我删除
显示：表格单元格溢出：隐藏将工作
垂直对齐：底部将不再工作

编辑：如果文本很长，文本需要向上扩展，直到达到40px。当它达到40px时，额外的文本将不会通过
overflow:hidden


div{
背景：黄色；
高度：40px；
宽度：250px；
显示：表格单元格；
垂直对齐：底部对齐；
溢出：隐藏；
}


需要溢出的地方在

（见我对显示问题的评论：表XX；）

如果这不完全是您需要的，您可以将最大高度或高度设置为

还有一些解释：
表格单元格将保持垂直扩展，这就是它的工作方式

如果设置
最大高度：100%给孩子，没有
高度
表单元格，它将增长它将是100%的未知

如果设置表格单元格的高度，如
height:100px
，它将增长，但如果
孩子们有
身高
或
最大身高
比如：
100%
，它将是那些100px的100%
在CSS文件中设置
这项工作：

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

在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>

希望这能帮助你


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

HTML：相同的HTML代码

CSS：像这样

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

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

也许这会解决您的问题…
表格显示会使它扩展，这是它的主要特性之一？@Vucko是的，就像那样。但是，有没有可能在不修改HTML结构的情况下执行此操作？@ICU222怎么样，不使用类似表的元素？@Vucko您的解决方案很接近，但不是我所需要的。对不起，我应该说得更清楚些。如果有很多文本，文本需要向上扩展，直到达到最大高度值（在您的示例height:40px；）。有没有一种方法可以做到这一点而不修改HTML结构？谢谢，我只是尝试将您的修改集成到我的代码中，并验证它是否正常工作！你的解决方案很接近，但不是我所需要的。对不起，我应该说得更清楚些。如果有大量文本，文本需要向上展开，直到达到最大高度值（在您的示例中为
高度：80px；
）。在这种情况下，请删除行高和溢出。演示和应答链接已更新：）使用div 100px高进行测试，以清楚地看到：）溢出：隐藏似乎不起作用。要工作，它必须是在和一个需要一个大小。无论发生什么情况，表格单元格都会不断扩展。它永远不会溢出：在垂直方向上隐藏。如果将“表布局”设置为“固定”，则可能是水平的。你的测试不符合我的建议：）
div {
    background: yellow; 
    height: 40px;
    width: 250px;
    overflow: hidden;
    position: relative;
}
div a{
    position: absolute;
    bottom: 0;
}

<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>

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

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

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

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