box-orient在新的flexbox中有什么替代方案？

Question

box-orient在新的flexbox中有什么替代方案？

13

根据谷歌员工在这里的评论

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

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

and replace them with new flexbox specs, how can I do that the desired result is to clamp lines at 2 lines length as in the demo (text-overflow to ellipsis)

<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问题所述。工作中的Angular演示在这里

- dota2pro

4个回答

2

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

尝试仅在第一次打开侧边栏时渲染其中的div。

- Kfir Dadosh

你能添加一个 StackBlitz 示例，让我更好地理解你想传达的内容吗？ - dota2pro

很遗憾，我没有Angular的经验。只需在第一次打开侧边导航后尝试渲染div，或仅在其处于打开状态时进行渲染。 - Kfir Dadosh

1

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

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

根据MDN，line-height的默认值大约为1.2em，但会根据字体而变化。

注意：这不会使文本出现省略号。

- Victor Babel

这对我不起作用，因为需要使用文本溢出省略号。 - dota2pro

也许可以尝试一些这里的技巧：https://css-tricks.com/line-clampin/ - Victor Babel

这就是我第一次发现行夹的方式。 - dota2pro

0

将此CSS属性应用于您的div。

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

- DerpyCoder

我以为你在恶作剧。https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-orientation - Coding Edgar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- HirenParekh · Accepted Answer

通过检查您的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 的替代方案，但没有找到，只能用这个解决方法。希望这对你有所帮助。