javascript - 什么是用新的 flexbox 替换 box-orient？

Question

根据谷歌人的评论 here

box-orient (and its webkit variant) is a non-standard property left over from an old version of the flexbox spec. Any bugs with it are probably related to that.

所以在下面的代码中我想删除以下样式 display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: 垂直;

并用新的 flexbox 规范替换它们，我该怎么做才能像演示中那样将行限制在 2 行长度(文本溢出到省略号)

<div style="min-height: 128px;
    border-radius: 7px;
    box-shadow: 0 2px 4px 0 rgba(210, 210, 210, 0.5);
    border: solid 0.3px rgba(26, 25, 25, 0.15);
    background-color: #ffffff;
    width: 268px;
    margin-bottom: 13px;">

  <div style="overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5.6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;">
    Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can we make
    this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’?

  </div>

</div>

注意:此更改的原因是当 html 元素默认隐藏时此样式不起作用，如本 Github issue 中所述.工作 Angular 演示 here

Answer 1

通过检查和检查您的 StackBlitz 演示。看来这只是 View 更新的问题。这可以使用 setTimeout() 函数解决。

我对您的 StackBlitz 代码进行了一些更改并解决了该问题。链接在这里: https://stackblitz.com/edit/sidenav-content-clamp-issue

我已经使用了 MatDrawer 的 openedStart 事件，我正在更新事件处理程序中侧边栏的内容，这已经以某种方式解决了这个问题。

正如我之前所说，这似乎是一个更新问题。因此，除了动态分配内容，我们还可以动态填充 .text 类，这也将解决问题。

这是 .ts 和 .html 文件的代码。

模板文件

<mat-sidenav-container class="example-container" *ngIf="shouldRun">
    <mat-sidenav #sidenav mode="side" [(opened)]="opened" (openedStart)="onSidebarOpenedChanged()" (closed)="events.push('close!')">
        Sidenav content

        <div class="container">
            <div class="text">
                {{content}} <!-- update this content in openedStart event handler-->
            </div>
        </div>
    </mat-sidenav>

    <mat-sidenav-content>
        <p>
            <mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox>
        </p>
        <!-- <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p> -->

        <div>SideNav should look the same</div>
        <div class="container">
            <div class="text">
                {{longStr}}
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

组件文件

import { Component } from '@angular/core';

/** @title Sidenav open & close behavior */
@Component({
  selector: 'sidenav-open-close-example',
  templateUrl: 'sidenav-open-close-example.html',
  styleUrls: ['sidenav-open-close-example.css'],
})
export class SidenavOpenCloseExample {
  events: string[] = [];
  opened: boolean;
  longStr = `Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can
                we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can
                we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’?`
  content;
  shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));

  onSidebarOpenedChanged() {
    setTimeout(() => {
      this.content = this.longStr;
    });
  }
}

我也试图找到 box-orient 的替代品，但没有找到，所以解决了这个问题。我希望这将有所帮助。