Cacher is the code snippet organizer for pro developers

/**
 * 標準、caniuse 見た感じもうほとんど対応してると思ってよさそう？
 *
 * text-overflow: ellipsis;
 * 
 * https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
 */
.ellipsis {
  overflow: hidden;     /* オーバーした要素を非表示にする*/
  white-space: nowrap;  /* 改行を半角スペースに変換することで、1行にする */
  width: 120px;         /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */
  text-overflow: ellipsis;
}

/**
 * .u-ellipsis
 * @link https://qiita.com/mpyw/items/e91aaec88880cb5ef37a
 */
.u-ellipsis {
    /* 任意 */
    /* min-width: 100px; /* 最小表示幅の指定 */
    /* max-width: 200px; /* 最大表示幅の指定 */
    max-width: 100%;
    /* 必須 */
    white-space: nowrap; /* 空白で改行させない */
    overflow: hidden; /* はみ出た部分を表示しない */
    text-overflow: ellipsis; /* はみ出た場合に「…」を表示 */
    -webkit-text-overflow: ellipsis; /* はみ出た場合に「…」を表示 (Safari用) */
    -o-text-overflow: ellipsis; /* はみ出た場合に「…」を表示 (Opera用) */
}
.u-ellipsis--inline {
  display: inline-block;
}


/* テキスト省略(1行) */
.u-ellipsis--oneline {
  height: 2rem;
  overflow: hidden;
  text-overflow:ellipsis;
}

/**
 * テキスト省略(複数行)
 */
.u-ellipsis--mutiple {
  line-height: 1.5;
  height: 2em; /*row-height*/
  background-color: #fff;
  position: relative;
  padding-right: 1em;
  overflow: hidden;
}

.u-ellipsis--mutiple::before {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-block;
  width: 1em;
}

.u-ellipsis--mutiple::after {
  content: "";
  position: relative;
  right: -1em;
  margin-left: -1em;
  float: right;
  width: 1em;
  height: 100%;
  background-color: inherit;
}