ability_yuma
10/10/2018 - 1:42 AM

テキスト一定を超えたら「...」で表示(webkitのみ)

IE等に対応させたいときは別の手段を考える。

part2参考 http://bit.ly/2YBJ71w

hoge.scss
content_copyfile_download
.hoge {
	width: auto;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.5;
	min-height: 10px * 1.5 * 2;
}
part2
content_copyfile_download
// Variables
$container-bg: #eee;
$font-size-base: 14px;
$line-height-computed: 1.4;
$lines-to-show: 3;

// Reset
p {
  margin: 0;
}

// Multiline text with ellipsis
// Supported IE and Firefox
.container {
  background: #eee;
  overflow: hidden;
  width: 100%;
  p {
    font-size: $font-size-base;
    height: $font-size-base * $line-height-computed * $lines-to-show;
    line-height: $line-height-computed;
    position: relative;
    &:before,
    &:after {
      background: #eee;
      position: absolute;
    }
    &:before {
      content: "...";
      top: $font-size-base * $line-height-computed * ($lines-to-show - 1);
      right: 0;
    }
    &:after {
      content: "";
      height: 100%;
      width: 100%;
    }
  }
}