Does not work css -webkit-line-clamp in ionic-app-scripts 1.2.5

[aspidvip]

https://forum.ionicframework.com/ http://ionicworldwide.herokuapp.com/

Short description of the problem:

Does not work css -webkit-line-clamp ionic-app-screipts 1.2.5:

.chat_pod {
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    vertical-align: middle;
    font-size: 0.7em;
  }

In version 1.0.0 everything worked

Steps to reproduce:

1. update ionic-app-scripts version 1.0.0 to 1.2.5

package.json:

{
  "name": "Pub",
  "author": "Pub Pub",
  "homepage": "http://pub.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/action-sheet": "^3.2.0",
    "@ionic-native/background-mode": "^3.1.1",
    "@ionic-native/camera": "^3.2.0",
    "@ionic-native/core": "^3.2.0",
    "@ionic-native/date-picker": "^3.2.0",
    "@ionic-native/dialogs": "^3.2.0",
    "@ionic-native/file": "^3.2.1",
    "@ionic-native/keyboard": "^3.1.1",
    "@ionic-native/media": "^3.3.0",
    "@ionic-native/native-audio": "^3.2.1",
    "@ionic-native/push": "^3.2.0",
    "@ionic-native/spinner-dialog": "^3.2.0",
    "@ionic-native/splash-screen": "^3.2.0",
    "@ionic-native/sqlite": "^3.2.1",
    "@ionic-native/status-bar": "^3.2.0",
    "@ionic-native/toast": "^3.2.0",
    "@ionic-native/transfer": "^3.2.0",
    "@ionic-native/vibration": "^3.2.1",
    "@ionic/storage": "2.0.0",
    "angular-svg-round-progressbar": "^1.0.6",
    "ionic-angular": "2.3.0",
    "ionicons": "3.0.0",
    "ng2-translate": "^5.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.2.5",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-nativeaudio",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    {
      "locator": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
      "id": "cordova-plugin-wkwebview-engine"
    },
    "cordova-plugin-dialogs",
    "cordova-sqlite-storage",
    "cordova-plugin-x-toast",
    "cordova-plugin-geolocation",
    "cordova-plugin-spinner-dialog",
    "cordova-plugin-file-transfer",
    "cordova-plugin-actionsheet",
    "cordova-plugin-background-mode@0.7.0",
    "cordova-plugin-camera",
    "cordova-plugin-datepicker",
    "cordova-plugin-file",
    "cordova-plugin-vibration",
    "cordova-plugin-media",
    {
      "variables": {
        "SENDER_ID": "############"
      },
      "locator": "phonegap-plugin-push"
    },
    "cordova-plugin-crosswalk-webview"
  ],
  "cordovaPlatforms": [],
  "description": "Pub"
}

Your system information: Cordova CLI: 6.5.0 Ionic Framework Version: 2.3.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.2.5 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 8 Node Version: v6.10.1 Xcode version: Not installed

[danbucholtz]

How can I recreate this issue?

Thanks, Dan

[aspidvip]

forum.html

<ion-header class="forum">
  <ion-navbar>
    <button ion-button menuToggle second  (click)="menu_enable()">
      <ion-icon name="menu"></ion-icon>
    </button>
   <ion-title>
     {{ 'forum.title' | translate}}
   </ion-title>
  </ion-navbar>
</ion-header>
<ion-content fullscreen>

  <ion-list>
    <button *ngFor="let item of LoadForum.catalog" ion-item (click)="NextPage(item)">
      <ion-icon class="icon_forum" item-left name="chatboxes"></ion-icon>
      <h2>{{ item.name_ru }}</h2>
      <p class="chat_pod">{{ item.opis }}</p>
    </button>
  </ion-list>

</ion-content>

forum.scss

  .chat_pod {
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  vertical-align: middle;
  font-size: 0.7em;
  }

Not displayed correctly:

Correct display:

[awebdeveloper]

can you check the generated css if it has this line -webkit-line-clamp: 2;

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!