Css text-overflow not showing properly

Question

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

preview

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?

Can you define "show properly". I don't know what you consider "proper" for your site. Also, it's very hard to assess CSS rules without seeing the html they are acting on. Can you boil this down to a small working example of the problem (one that can be read easily by folks here in a few minutes)? If you do that and don't figure out the solution while you are doing it then you can provide the whole example here and we can help you troubleshoot it without wasting a lot of time deciphering unrelated elements. — Gus
– Gus, Commented Jan 31, 2012 at 18:52
+1 for teaching me something new today. I didn't even know the ellipsis option existed! — Nathan Arthur
– Nathan Arthur, Commented Jan 31, 2012 at 19:33

Community · Accepted Answer · 2017-05-23 12:25:10Z

5

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.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jan 31, 2012 at 18:57

JimmiTh

7,4493 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Over a year ago

ok, it works but setting only the text-overflow:... is not enough I had to set also at least overflow: hidden; so the ... show up.

JimmiTh Over a year ago

@w0rldart - yeah, overflow also isn't inherited. white-space is, but for consistency's sake, you should probably move that too. Updated answer.

Alex Over a year ago

now the problem is that everything limits to only 1 line of text. I would like to set it a max text/width/characters and then show the ellipsis. I've tried already with width/height and max but no succes

JimmiTh Over a year ago

@w0rldart - Added link to a question dealing with multiple lines.

Alex Over a year ago

so it all ends to jquery :). Thanks for the info @TheKaneda. I'll mark your answer as accepted

Baldrick · Accepted Answer · 2012-01-31 18:54:48Z

0

Remove the white-space:nowrap; if you want the text in the green box displayed on several lines.

answered Jan 31, 2012 at 18:54

Baldrick

24.4k6 gold badges76 silver badges80 bronze badges

Comments

Martin · Accepted Answer · 2013-01-23 11:31:32Z

0

Set your .column li to display: block. It already floats, so there is no display: inline needed. And text-overflow is not inherited, as already mentioned.

Also it depends on the browser, not all support ellipsis. Look here for more information.

edited Jan 23, 2013 at 11:31

answered Jan 31, 2012 at 19:01

Martin

4,3506 gold badges32 silver badges48 bronze badges

Collectives™ on Stack Overflow

Css text-overflow not showing properly

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related