/*
<div class="jimu-clamp-wrap">
  <div class="clamp">mult-line clap.</div>
</div>

PS: style padding should be set in wrapper
*/
.jimu-clamp-wrap {
  height: 44px;
  line-height: 22px;/*clamp 2 line*/
  overflow: hidden;
}
.jimu-clamp-wrap .clamp {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.jimu-rtl .jimu-clamp-wrap .clamp {
  float: left;
  margin-left: auto;
  margin-right: -5px;
}
.jimu-clamp-wrap::before {
  float: left;
  width: 5px;
  content: '';
  height: 44px;
}
.jimu-rtl .jimu-clamp-wrap::before {
  float: right;
}
.jimu-clamp-wrap::after {
  position: relative;
  float: right;
  text-align: right;
  content: "...";
  width: 4em;
  margin-left: -4em;
  left: 100%;
  padding-right: 5px;

  height: 22px;/*line height*/
  line-height: 22px;
  top: -22px;
  /*background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);*/
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
}
.jimu-rtl .jimu-clamp-wrap::after {
  float: left;
  text-align: left;
  margin-left: auto;
  margin-right: -4em;
  left: auto;
  right: 100%;
  padding-right: 0;
  padding-left: 5px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white 65%, white);
}