Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Css text-overflow not showing properly

Css text-overflow not showing properly

Problem

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?

Problem courtesy of: Alex

Solution

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; /* 

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.

Solution courtesy of: JimmiTh

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Css text-overflow not showing properly

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×