html - 将文本底部对齐并强制隐藏溢出

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

更多解释：表格单元格将保持垂直扩展，这就是它的工作原理。

1. 如果您设置max-height:100%;为 child ，并且heighttable-cell 设置为 no，它将增长它将是 100% 的未知数。
2. 如果将高度设置为 table-cell like height:100px，它会增长，但如果孩子有height或max-height喜欢: 100%，它将是 CSS 文件中设置的 100px 的 100%。

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