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, Jan 31 '12 at 18:52
+1 for teaching me something new today. I didn't even know the `ellipsis` option existed! — Nathan Arthur, Jan 31 '12 at 19:33

score 5 · Accepted Answer · edited May 23 '17 at 12:25

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 '17 at 12:25

Community

1
1

answered Jan 31 '12 at 18:57

JimmiTh

7,389
3
34
50

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. – Alex Jan 31 '12 at 21:50
@w0rldart - yeah, `overflow` also isn't inherited. `white-space` is, but for consistency's sake, you should probably move that too. Updated answer. – JimmiTh Jan 31 '12 at 21:57
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 – Alex Jan 31 '12 at 22:17
@w0rldart - Added link to a question dealing with multiple lines. – JimmiTh Jan 31 '12 at 22:27
so it all ends to jquery :). Thanks for the info @TheKaneda. I'll mark your answer as accepted – Alex Jan 31 '12 at 22:29

score 0 · Answer 2 · answered Jan 31 '12 at 18:54

0

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

answered Jan 31 '12 at 18:54

Baldrick

23,882
6
74
79

Martin · Answer 3 · 2013-01-23T11:31:32.923

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 '13 at 11:31

answered Jan 31 '12 at 19:01

Martin

4,170
6
30
47

Css text-overflow not showing properly

3 Answers3