打字稿中的原始html方法

时间:2017-11-16 07:30:27

标签: angular typescript

我需要为段落的不同行应用不同的样式,这些行已在typescript中动态绑定

我试图逐行拆分我的字符串变量,但我的变量中有标签。任何人都可以在typescipt中提供原始html方法而不是html

任何人都可以提供打字稿

的解决方案

请找到以下段落,对于我需要作为输出的不同行,它的样式不同

enter image description here

1 个答案:

答案 0 :(得分:1)

您可以通过在文本参数上添加淡入透明渐变来实现此目的。

Example on codepen

HTML

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
     eiusmod tempor incididunt ut labore et dolore 
     magna aliqua. Ut enim ad minim veniam, quis nostrud
     exercitation ullamco. </p>
</div>

CSS

.box {
  width: 320px;
  height: 100px;
  border: 2px solid #000;
  margin: 0 auto;
  padding: 1rem;
  overflow: hidden;
}

.box > p {
  margin: 0;
  -webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}