Ionic 2.2.0 removing css property -webkit-box-orient

Ionic Framework ionic-v3
1

I have a css class that looks like the following:

.max-3-lines {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

I’m using it to limit the number of lines of text that a div shows. This has worked well until I upgraded to Ionic 2.2.0. Now, however, the div doesn’t limit lines anymore. After looking into it I found that one of the properties needed to make it work is missing. In the Chrome inspector, the class looks like this:

.max-3-lines {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
}

Ionic is apparently removing the -webkit-box-orient property during transpiling. I can add the property back inside the Chrome inspector, and then the div behaves as expected.

Why would this property be getting removed? Is this a bug in Ionic 2.2.0? And is there a workaround?

Thanks

3 Likes
2

I have the same problem and I think it is present since 2.1.0. Probably because of the new grid… Any solutions? Thanks!

3

Got the same problem.

4

The same issues remains in my project. I try to limit my text in two lines and once the text is larger than the width of my div, i show the ellipsis overflow. But it doesn’t work.

5

Same here. I checked to make sure all of my CSS sections w/ line clamps also include the -webkit-box-orient property, and they do, but I can see in the Safari and Chrome web inspectors that that property disappears when I run on ionic serve or on an emulator/device.

6

You need to add the -webkit-box-orient property Inline, like this:
<element style="-webkit-box-orient: vertical"><element>

3 Likes