0

I have few box items and use flex to align them.

Each box has flex-direction: vertical attribute.

However, as you can see the blue description. I want to make them have the same height and the overflow part should display ellipsis.

However, no luck at all. The text is inside div.control > div

Any idea?

   height: 50px !important;

    text-overflow: ellipsis;
    div.control{
      overflow: hidden;
      text-overflow: ellipsis;
      div{
        height: 50px;
        background: lightblue;
        overflow: hidden;
        text-overflow: ellipsis;

      }
    }

inline

newBike
  • 12,989
  • 25
  • 88
  • 158
  • jsfiddle link please. Otherwise it's hard for people to help – Kent V Jan 10 '18 at 19:04
  • The `text-overflow` property only applies to horizontal overflow, and not vertical overflow unfortunately. Have you considered approaching this with a javascript method in mind? – UncaughtTypeError Jan 10 '18 at 19:07

2 Answers2

0

According to this question, using text-overflow:ellipsis; only when reaching 3 lines in a div the ellipsis in y overflow can't be done in straight CSS. You can however fix the height of all of them using the max-height property instead of just height.

Cappie
  • 1
  • 2
0

Check out this documentation on Text Overflow:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).

If you want more than one line of text to appear, I think you'll need to utilize another method for displaying an ellipsis. Here's an idea where the ellipsis appears outside the box of text:

https://jsfiddle.net/e0juLnvo/1/

.child {
    max-height: 50px;
    overflow: hidden;
}

.parent:after {
    content: '...';
}

Since I can't see your code, I cannot comment on why your flex boxes aren't aligned properly. Sorry!

Jenn Moore
  • 1
  • 1