search

ViYaYaYa / gist

gist的入口太隐蔽了，以后在这里写！
0 stars 0 forks source link

多行溢出ellipsis的mixin #2

Open ViYaYaYa opened 6 years ago

ViYaYaYa commented 6 years ago 
.ellipsis(@line: 1, @lineHeight: 1) {
  overflow: hidden;
  height: unit(@line * @lineHeight, em);
  &:before {
    content: "";
    float: left;
    width: 1px; // 下面的1px都跟这个因素挂钩
    height: 100%;
  }
  & > .ellipsis-content {
    float: right;
    width: 100%;
    margin-left: -1px;
  }
  &:after {
    box-sizing: content-box;
    content: "…";
    float: right;
    position: relative;
    left: 100%;
    top: -1em * @lineHeight;
    width: 1em;
    padding-right: 1px; // 用right是因为left的可能会挡住部分
    margin-left: -1em;
  }
}