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，所以它不是文本所在的实际元素，而是灰色背景的边界框。 / p>

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，目前是不可能的。看看this question。

Answer 2

如果您希望绿色框中的文字显示在多行上，请删除white-space:nowrap;。

Answer 3

将.column li设为display: block。它已经浮动，因此不需要display: inline。如上所述，text-overflow不会被继承。

此外，它取决于浏览器，而不是所有支持ellipsis。查看here了解更多信息。