Переполнение текста в 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.Посмотрите на этот вопрос .

Answer 2

Установите .column li на display: block. Он уже плавает, поэтому display: inline не требуется. И text-overflow не наследуется, как уже упоминалось.

Также это зависит от браузера, не все поддерживают ellipsis. Смотрите здесь для получения дополнительной информации.

Answer 3

Удалите white-space:nowrap;, если хотите, чтобы текст в зеленом поле отображался в нескольких строках.