Question

Can’t get to show properly my h2 title when to large

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

What am I doing wrong?

Answer 1

Well, I’m guessing… Since the rule with text-overflow: ellipsis also has height: 200px, it’s not the actual element that the text is in, but rather the bounding box with gray background.

text-overflow and overflow are not inherited, which means that if you want them to apply to the text, it must be defined on the element containing the text, not a parent element.

In other words:

.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 */
}

If you need a multiple line box with an ellipsis at the end of the last line, that’s not currently possible without javascript. Have a look at this question.