css [css：省略号]はみ出たテキストの省略（省略号とかいうらしい）#css

Posted 2021-05-13

/**
 * .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;
}