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

Question

根据谷歌人的评论here

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 issue提到的html元素默认隐藏时这个样式不起作用。工作 Angular 演示 here

Answer 1

通过检查和检查您的 StackBlitz 演示。看来这只是视图更新的问题。可以使用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 的替代品，但没有找到，于是解决了这个问题。我希望这将有所帮助。

Answer 2

在您的 Angular 代码示例中，如果您打开侧导航，并在开发工具中切换 div css 显示属性两次，它就会按预期工作。然后您可以毫无问题地打开和关闭它。

尝试仅在第一次打开时在侧导航中呈现 div。

Answer 3

您可以在内部div 上定义一个line-height，然后将max-height 设置为行高的两倍：

line-height: 1.2em
max-height: 2.4em

每个 MDN，the default value of normal for line-height is around 1.2em but changes depending on the font。

注意：这将不允许文本省略

Answer 4

将此 css 属性应用到您的 div。

text-orientation: "either mixed or upright or sideways" ;