Css文本溢出无法正常显示

Question

无法h2在大到时正确显示我的头衔

CSS:

.column li{
    float: left;
    width: 200px;
    min-width: 150px;
    margin: 5px auto;
    display: inline;
  }
  .column li .block {
    height: 200px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 20px;
    font-size: 1em;
    background-color: #ccc;

    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;

    border: 1px solid black;
  }
  .column li .block a img {
    width: 89%;
    padding: 5%;
    border: 2px solid white;
    margin: 0 auto;
    display: block;
    background: white;
  }
  .column li .block h2{ font-size: 1.1em; margin: 10px 0 20px 0; border: 1px solid green; }
  .column li .block h2 a{ color: #000000; }

我究竟做错了什么？

Answer 1

嗯,我猜...因为规则text-overflow: ellipsis也有height: 200px,它不是文本所在的实际元素,而是灰色背景的边界框.

text-overflow而overflow在不继承,这意味着如果你希望他们应用于文本,它必须包含文本,而不是一个父元素的元素定义.

换一种说法:

.column li .block h2
{
    font-size: 1.1em;
    margin: 10px 0 20px 0;
    border: 1px solid green;
    text-overflow: ellipsis; /* <---- */
    overflow: hidden;        /* <---- */
    white-space: nowrap;     /* This one is inherited, but for consistency's 
                                sake, you may want to move it */
}

如果你需要一个在最后一行末尾带有省略号的多行框,那么如果没有javascript,目前是不可能的.看看这个问题.