根据谷歌人的评论 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
最佳答案
通过检查和检查您的 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 的替代品，但没有找到，所以解决了这个问题。我希望这将有所帮助。
关于javascript - 什么是用新的 flexbox 替换 box-orient？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57665421/
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返
在我的应用程序中，我需要能够找到所有数字子字符串，然后扫描每个子字符串，找到第一个匹配范围(例如5到15之间)的子字符串，并将该实例替换为另一个字符串“X”。我的测试字符串s="1foo100bar10gee1"我的初始模式是1个或多个数字的任何字符串，例如，re=Regexp.new(/\d+/)matches=s.scan(re)给出["1","100","10","1"]如果我想用“X”替换第N个匹配项，并且只替换第N个匹配项，我该怎么做？例如，如果我想替换第三个匹配项“10”(匹配项[2])，我不能只说s[matches[2]]="X"因为它做了两次替换“1fooX0barXg
它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput
我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象