用新的flexbox替代面向盒的方法是什么？

Question

按照谷歌的人的评论点击这里

box-orient（及其webkit变体）是Flexbox规范的旧版本遗留的非标准属性。它的任何错误都可能与此有关。

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

并用新的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>

注意：进行此更改的原因是，如本Github问题中所述，默认情况下隐藏html元素时，此样式无效。在这里工作角度演示

Answer 1

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

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

我已经使用过openedStart事件，MatDrawer并且正在更新事件处理程序中侧栏的内容，从而以某种方式解决了该问题。

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

这是.ts nad .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;
    });
  }
}

我还尝试找到面向盒的替代品，但没有找到替代品，并进行了解决。我希望这将有所帮助。